@iapps/ng-dhis2-ui 1.1.46 → 1.1.48

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

@@ -25,9 +25,9 @@ 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, 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, MultiSelectField, TextAreaField } from '@dhis2/ui';
+import { Button as Button$1, IconDimensionData16, IconClock16, IconDimensionOrgUnit16, spacers as spacers$1, colors as colors$1, IconEdit16, theme as theme$1, Tooltip, 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, Chip, FileInputField, FileListItem, MultiSelectField, TextAreaField } from '@dhis2/ui';
 import { getNowInCalendar, generateFixedPeriods } from '@dhis2/multi-calendar-dates';
-import { isObject, isString, sortBy, isArray, find, camelCase, flatten, head, isEmpty } from 'lodash';
+import { isObject, isString, sortBy, isArray, find, camelCase, flatten, debounce, head, isEmpty } from 'lodash';
 import cx from 'classnames';
 import { map as map$1, switchMap } from 'rxjs/operators';
 import * as i2 from '@angular/forms';
@@ -1564,6 +1564,62 @@ TransferOption.propTypes = {
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
+// Helper function to generate a unique class name
+const generateClassName$2 = (base) => `${base}-${Math.random().toString(36).substr(2, 9)}`;
+// Helper function to convert camelCased properties to hyphenated CSS properties
+const convertStylesToCSS$2 = (className, styles) => {
+    let cssString = `.${className} {`;
+    for (const key in styles) {
+        if (typeof styles[key] === 'object' && key.startsWith('@media')) {
+            const mediaStyles = convertStylesToCSS$2(className, styles[key]);
+            cssString += `${key} { ${mediaStyles} }`;
+        }
+        else if (key.startsWith('&:')) {
+            const pseudoClass = key.replace('&', '');
+            cssString += `${pseudoClass} { ${convertStylesToCSS$2('', styles[key])} }`;
+        }
+        else {
+            const cssKey = key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+            cssString += `${cssKey}: ${styles[key]}; `;
+        }
+    }
+    cssString += '}';
+    return cssString;
+};
+// Custom hook for dynamic styles with generics
+const useDynamicStyles$2 = (stylesObj) => {
+    const [classNames, setClassNames] = useState({});
+    useEffect(() => {
+        const convertedStyles = Object.keys(stylesObj).map((key) => {
+            const className = generateClassName$2(key);
+            const styleElement = document.createElement('style');
+            styleElement.innerHTML = convertStylesToCSS$2(className, stylesObj[key]);
+            document.head.appendChild(styleElement);
+            return {
+                key,
+                className,
+                styleElement,
+            };
+        });
+        setClassNames(convertedStyles.reduce((classNameEntity, convertedStyle) => {
+            return {
+                ...classNameEntity,
+                [convertedStyle.key]: convertedStyle.className,
+            };
+        }, {}));
+        return () => {
+            convertedStyles.forEach((convertedStyle) => {
+                document.head.removeChild(convertedStyle.styleElement);
+            });
+        };
+    }, []);
+    return classNames;
+};
+
+// Copyright 2025 UDSM DHIS2 Lab. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
 // Copyright 2023 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.
@@ -3141,7 +3197,7 @@ class LineListService {
         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,attributes[*,displayInList],enrollments[*]&totalPages=true&${filterParams}${dateFilter}&order=created:desc`).pipe(map$1((response) => {
+        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) => {
             //TODO: use the api to to order by desc
             // response.trackedEntityInstances.reverse();
             return response;
@@ -3217,20 +3273,21 @@ const getTrackedEntityData = (response, programId, pager, filters) => {
     let teis = response.data
         .trackedEntityInstances;
     let programMetaData = response.metadata.programTrackedEntityAttributes;
-    //let progrmaMetaDataAttributesMap = programMetaData.reduce
+    //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]));
     const mappedProgramMetadataAttributes = programMetaData.map((attr) => ({
         displayInList: attr.displayInList,
         searchable: attr.searchable,
         id: attr.trackedEntityAttribute.id,
     }));
-    console.log('the mapped attributes', mappedProgramMetadataAttributes);
     const programAttributesMap = programMetaData.reduce((acc, attribute) => {
         if (attribute.displayInList) {
             acc[attribute.id] = attribute.displayName;
         }
         return acc;
     }, {});
-    console.log('metadat attributes', programMetaData);
     if (filters) {
         teis = getFilteredTrackedEntityInstances(teis, filters);
     }
@@ -3242,11 +3299,6 @@ const getTrackedEntityData = (response, programId, pager, filters) => {
             : tei.attributes;
         attributes.forEach((attr) => allAttributes.add(attr.attribute));
     });
-    console.log('all of the attributes', allAttributes);
-    // const filteredAttributes = new Set(
-    //   [...allAttributes].filter((attributeId) => programAttributesMap[attributeId])
-    // );
-    // console.log('Filtered All Attributes:', filteredAttributes);
     let entityColumns = Array.from(allAttributes).map((attrId) => {
         const foundAttribute = teis
             .flatMap((tei) => {
@@ -3265,6 +3317,15 @@ 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',
+        key: 'orgUnit',
+    });
     const searchableAttributes = mappedProgramMetadataAttributes
         .filter((attr) => attr.searchable && attr.displayInList)
         .map((attr) => ({
@@ -3275,8 +3336,6 @@ const getTrackedEntityData = (response, programId, pager, filters) => {
     const searchableKeys = new Set(searchableAttributes.map((attr) => attr.key));
     // Filter entityColumns to keep only those whose key exists in searchableAttributes
     const filteredEntityColumns = entityColumns.filter((column) => searchableKeys.has(column.key));
-    console.log('show the filtered values', filteredEntityColumns);
-    console.log('the answer is ', searchableAttributes);
     const attributesData = teis.map((tei, idx) => {
         let row = {
             trackedEntityInstance: tei.trackedEntityInstance,
@@ -3288,9 +3347,10 @@ const getTrackedEntityData = (response, programId, pager, filters) => {
             ? matchingEnrollment.attributes
             : tei.attributes;
         attributesToUse.forEach((attr) => (row[attr.attribute] = attr.value));
+        // Access the name of the orgUnit using the Map
+        row['orgUnit'] = orgUnitMap.get(tei.orgUnit) || tei.orgUnit || 'N/A';
         return row;
     });
-    console.log('attributes to use', entityColumns);
     return { columns: entityColumns, data: attributesData, filteredEntityColumns: filteredEntityColumns };
 };
 const getEventData = (response, pager) => {
@@ -3360,6 +3420,9 @@ class LineListTableComponent extends ReactWrapperModule {
             const [filteredColumns, setFilteredColumns] = useState();
             const [inputValues, setInputValues] = useState({});
             const [filters, setFilters] = useState(false);
+            //TODO: this will be migrated on the parent component
+            const [checkValue, setCheckValue] = useState([]);
+            const [valueMatch, setValuesMatch] = useState(false);
             // Store updaters in refs for Angular to access
             const updateRefs = useRef({
                 setProgramIdState,
@@ -3409,10 +3472,16 @@ class LineListTableComponent extends ReactWrapperModule {
                         const { columns, data, filteredEntityColumns } = getTrackedEntityData(response, this.programId, pager, this.filters);
                         entityColumns = columns;
                         entityData = data;
-                        let firstTei = response.data
-                            ?.trackedEntityInstances?.[0]?.trackedEntityInstance;
-                        if (firstTei) {
-                            this.firstValue.emit(firstTei);
+                        //TODO: Should be done on the parent
+                        let checkValues = [
+                            ...new Set(response.data?.trackedEntityInstances?.[0]?.enrollments?.[0]?.events?.flatMap((event) => event.dataValues
+                                .filter((dataValue) => /^[A-Za-z]{3}$/.test(dataValue.value))
+                                .map((dataValue) => dataValue.value))),
+                        ];
+                        if (checkValues) {
+                            // this.firstValue.emit(firstTei);
+                            setCheckValue(checkValues);
+                            setValuesMatch(!checkValues.includes(this.buttonFilter));
                         }
                         //  setFilteredColumns(filteredEntityColumns);
                         // Ensure filter inputs do not disappear when no data is returned
@@ -3504,9 +3573,12 @@ class LineListTableComponent extends ReactWrapperModule {
                         padding: 8,
                         marginBottom: 16,
                     } },
-                    this.dispatchTeis &&
-                        (isButtonLoading ? (React__default.createElement(CircularLoader$1, { small: true })) : (React__default.createElement(Button$1, { style: {
-                                backgroundColor: '#3b82f6', // Blue color
+                    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',
@@ -3555,7 +3627,7 @@ class LineListTableComponent extends ReactWrapperModule {
                         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, style: {
+                        React__default.createElement(DataTableCell, { colSpan: columns.length?.toString(), style: {
                                 textAlign: 'center',
                                 fontWeight: 'bold',
                                 color: 'grey',
@@ -3608,7 +3680,7 @@ 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" }, 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: "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" }, 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"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListTableComponent, decorators: [{
             type: Component,
@@ -3645,6 +3717,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
                 type: Input
             }], firstValue: [{
                 type: Output
+            }], buttonFilter: [{
+                type: Input
             }] } });
 
 class LineListModule {
@@ -3814,7 +3888,7 @@ class DataTableUIComponent extends ReactWrapperModule {
                         React__default.createElement(DropdownMenu, { dropdownOptions: getDropdownOptions(row), onClick: (option) => option.onClick?.(row) }))))))),
                 React__default.createElement(TableFoot, null,
                     React__default.createElement(DataTableRow, null,
-                        React__default.createElement(DataTableCell, { colSpan: columns.length + 1 })))))));
+                        React__default.createElement(DataTableCell, { colSpan: (columns.length || 0 + 1).toString() })))))));
         };
     }
     async ngAfterViewInit() {
@@ -4797,6 +4871,230 @@ class FormValue {
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
+// Copyright 2025 UDSM DHIS2 Lab. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+const useFieldValidation = (props) => {
+    const { form, touched, field, value } = props;
+    const hasError = useMemo(() => {
+        return touched && (form.get(field.id) || form.get(field.key))?.invalid;
+    }, [value, touched]);
+    const validationError = useMemo(() => {
+        if (!touched) {
+            return undefined;
+        }
+        const error = (form.get(field.id) || form.get(field.key))?.errors;
+        if (!error) {
+            return undefined;
+        }
+        if (error['min']) {
+            return `${field.label || 'Value'} should not be less than ${error['min'].min}!`;
+        }
+        else if (error['max']) {
+            return `${field.label || 'Value'} should not be greater than ${error['max'].max}!`;
+        }
+        else if (error['pattern']) {
+            if (field.type === 'email') {
+                return `The email address provided is not valid`;
+            }
+            else if (field.type === 'tel') {
+                return 'Phone number provided is not valid';
+            }
+            else {
+                return `${field.label || 'Value'} should have appropriate format`;
+            }
+        }
+        return error['required']
+            ? `${field.label || 'Value'} is required`
+            : undefined;
+    }, [hasError]);
+    return { hasError, validationError };
+};
+
+// Copyright 2025 UDSM DHIS2 Lab. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+// Copyright 2025 UDSM DHIS2 Lab. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+// @flow
+const orgUnitFieldStyles = {
+    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 = (props) => {
+    const { onSelectOrgUnit, label, required, selected, disabled, key } = props;
+    const d2 = window?.d2Web;
+    const classes = useDynamicStyles$2(orgUnitFieldStyles);
+    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] = React__default.useState();
+    const [expanded, setExpanded] = React__default.useState(initiallyExpanded);
+    const [showOrgUnitTree, setShowOrgUnitTree] = useState(!selected);
+    useEffect(() => {
+        setLoading(true);
+        if (selected) {
+            d2.httpInstance
+                .get(`organisationUnits/${selected}.json?fields=id,name,path,code,ancestors[id,name]`)
+                .then((response) => {
+                if (response.data) {
+                    setSelectedOrgUnit(response.data);
+                    handleExpand({ path: response.data['path'] });
+                    setLoading(false);
+                }
+            });
+        }
+        else {
+            setLoading(false);
+        }
+    }, [selected]);
+    const highlighted = useMemo(() => {
+        if (selectedOrgUnit) {
+            return [selectedOrgUnit['path']];
+        }
+        return undefined;
+    }, [selectedOrgUnit]);
+    const selectedOrgUnitLabel = useMemo(() => {
+        if (selectedOrgUnit) {
+            return [
+                ...(selectedOrgUnit['ancestors'] || []),
+                selectedOrgUnit,
+            ]
+                .map((orgUnit) => orgUnit['name'])
+                .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);
+                    onSelectOrgUnit(event.id);
+                } })));
+        }
+        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);
+                onSelectOrgUnit(event.id);
+            } }));
+    };
+    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)))),
+            selected && !showOrgUnitTree ? (selectedOrgUnit ? (React__default.createElement(Tooltip, { content: selectedOrgUnitLabel },
+                React__default.createElement(Chip, { onRemove: () => {
+                        setShowOrgUnitTree(true);
+                    } }, selectedOrgUnit.name))) : (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()))))))));
+};
+
 // Copyright 2024 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.
@@ -4886,45 +5184,15 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                 }
                 return [];
             }, [value]);
-            const hasError = useMemo(() => {
-                return (touched &&
-                    (this.form().get(this.field().id) ||
-                        this.form().get(this.field().key))?.invalid);
-            }, [value, touched]);
-            const validationError = useMemo(() => {
-                if (!touched) {
-                    return undefined;
-                }
-                const field = this.field();
-                const error = (this.form().get(field.id) || this.form().get(field.key))
-                    ?.errors;
-                if (!error) {
-                    return undefined;
-                }
-                if (error['min']) {
-                    return `${this.label() || 'Value'} should not be less than ${error['min'].min}!`;
-                }
-                else if (error['max']) {
-                    return `${this.label() || 'Value'} should not be greater than ${error['max'].max}!`;
-                }
-                else if (error['pattern']) {
-                    if (field.type === 'email') {
-                        return `The email address provided is not valid`;
-                    }
-                    else if (field.type === 'tel') {
-                        return 'Phone number provided is not valid';
-                    }
-                    else {
-                        return `${this.label() || 'Value'} should have appropriate format`;
-                    }
-                }
-                return error['required']
-                    ? `${this.label() || 'Value'} is required`
-                    : undefined;
-            }, [hasError]);
+            const { hasError, validationError } = useFieldValidation({
+                field: this.field(),
+                form: this.form(),
+                value,
+                touched,
+            });
             switch (this.field().controlType) {
                 case 'textarea':
-                    return (React__default.createElement(TextAreaField, { 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(), disabled: this.field()?.disabled || this.field()?.generated || this.field()?.unique || false, readOnly: this.field()?.disabled || this.field()?.generated || this.field()?.unique || false, placeholder: this.placeholder(), value: value, onChange: (event) => {
+                    return (React__default.createElement(TextAreaField, { error: hasError, validationText: validationError, inputWidth: this.fieldConfig()?.inputWidth, required: this.field().required, name: this.field().id, 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);
@@ -4941,34 +5209,14 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                             });
                         } }));
                 case 'org-unit':
-                    return (React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement(InputField$1, { error: hasError, validationText: validationError, type: this.field().type, prefixIcon: React__default.createElement(IconDimensionOrgUnit16, null), required: this.field().required, name: this.field().id, label: this.label(), placeholder: this.placeholder(), value: displayValue, disabled: this.field()?.disabled || this.field()?.generated || this.field()?.unique || false, readOnly: this.field()?.disabled || this.field()?.generated || this.field()?.unique || false, onFocus: () => {
-                                setShowOrgUnit(true);
-                            }, onBlur: () => {
-                                this.ngZone.run(() => {
-                                    this.update.emit({ form: this.form(), value });
-                                });
-                                setTouched(true);
-                            } }),
-                        showOrgUnit && (React__default.createElement(this.FieldOrgUnitSelector, { selectedOrgUnits: [], onSelectOrgUnit: (selectedOrgUnits) => {
-                                if ((selectedOrgUnits || [])[0]) {
-                                    const selectedOrgUnit = selectedOrgUnits[0];
-                                    setDisplayValue(selectedOrgUnit.name);
-                                    setValue(selectedOrgUnit.id);
-                                    setShowOrgUnit(false);
-                                    setTouched(true);
-                                    this.ngZone.run(() => {
-                                        (this.form().get(this.field().id) ||
-                                            this.form().get(this.field().key))?.setValue(selectedOrgUnit.id);
-                                        this.immediateUpdate.emit({
-                                            form: this.form(),
-                                            value: selectedOrgUnit.id,
-                                        });
-                                    });
-                                }
-                            } }))));
+                    return (React__default.createElement(OrgUnitFormField, { label: this.label(), key: this.field().id, required: this.field().required, onSelectOrgUnit: (selectedOrgUnit) => {
+                            setValue(selectedOrgUnit);
+                            this.ngZone.run(() => {
+                                this.update.emit({ form: this.form(), value });
+                            });
+                        }, selected: value, onBlur: (event) => { } }));
                 case 'transfer':
-                    return (React__default.createElement(Transfer, { filterable: true, filterPlaceholder: "Search", selected: selected, error: hasError, validationText: validationError, type: this.field().type, inputWidth: this.fieldConfig()?.inputWidth, disabled: this.field()?.disabled || this.field()?.generated || this.field()?.unique || false, readOnly: this.field()?.disabled || this.field()?.generated || this.field()?.unique || false, required: this.field().required, name: this.field().id, label: this.label(), placeholder: this.placeholder(), value: selected, leftHeader: React__default.createElement("div", { style: {
+                    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: {
@@ -4985,7 +5233,10 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                             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: this.field()?.disabled || this.field()?.generated || this.field()?.unique || false, readOnly: this.field()?.disabled || this.field()?.generated || this.field()?.unique || false, onChange: (event) => {
+                    return (React__default.createElement(Checkbox, { checked: Boolean(value), error: hasError, label: this.label(), name: this.field().id, disabled: this.field()?.disabled ||
+                            this.field()?.generated ||
+                            this.field()?.unique ||
+                            false, onChange: (event) => {
                             this.ngZone.run(() => {
                                 (this.form().get(this.field().id) ||
                                     this.form().get(this.field().key))?.setValue(event.checked);
@@ -4998,7 +5249,10 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                             });
                         } }));
                 case 'dropdown':
-                    return (React__default.createElement(SingleSelectField, { filterable: (this.field().options || []).length > 5, clearable: true, error: hasError, validationText: validationError, inputWidth: this.fieldConfig()?.inputWidth, disabled: this.field()?.disabled || this.field()?.generated || this.field()?.unique || false, readOnly: this.field()?.disabled || this.field()?.generated || this.field()?.unique || false, required: this.field().required, name: this.field().id, className: "select", label: this.label(), selected: value, onChange: (event) => {
+                    return (React__default.createElement(SingleSelectField, { filterable: (this.field().options || []).length > 5, clearable: true, error: hasError, validationText: validationError, inputWidth: this.fieldConfig()?.inputWidth, disabled: this.field()?.disabled ||
+                            this.field()?.generated ||
+                            this.field()?.unique ||
+                            false, 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);
@@ -5011,7 +5265,10 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                             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: this.field()?.disabled || this.field()?.generated || this.field()?.unique || false, readOnly: this.field()?.disabled || this.field()?.generated || this.field()?.unique || false, label: this.label(), name: this.field().id, required: this.field().required, loadingText: "Loading options", noMatchText: "No options found", onChange: (event) => {
+                    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: this.field()?.disabled ||
+                            this.field()?.generated ||
+                            this.field()?.unique ||
+                            false, 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) ||
@@ -5025,7 +5282,7 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                             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(FileInputField, { accept: "*", buttonLabel: "Upload a file", label: this.label(), name: this.field().id, disabled: this.field()?.disabled || this.field()?.generated || this.field()?.unique || false, readOnly: this.field()?.disabled || this.field()?.generated || this.field()?.unique || false, files: this.uploadedFiles, onChange: (event) => {
+                    return (React__default.createElement(FileInputField, { accept: "*", buttonLabel: "Upload a file", label: this.label(), name: this.field().id, onChange: (event) => {
                             this.uploadedFiles.push((event?.files || [])[0]);
                             this.ngZone.run(() => {
                                 this.form().get(this.field().id) ||
@@ -5047,7 +5304,13 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                             });
                         }, removeText: "Remove" })))));
                 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, disabled: this.field()?.disabled || this.field()?.generated || this.field()?.unique || false, readOnly: this.field()?.disabled || this.field()?.generated || this.field()?.unique || false, onChange: (event) => {
+                    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, disabled: this.field()?.disabled ||
+                            this.field()?.generated ||
+                            this.field()?.unique ||
+                            false, readOnly: this.field()?.disabled ||
+                            this.field()?.generated ||
+                            this.field()?.unique ||
+                            false, onChange: (event) => {
                             this.ngZone.run(() => {
                                 (this.form().get(this.field().id) ||
                                     this.form().get(this.field().key))?.setValue(event.value);
@@ -5877,8 +6140,8 @@ class SelectionFiltersComponent extends ReactWrapperModule {
                                     setTouched(true);
                                 }
                             } }))),
-                    React__default.createElement(InputField$1, { className: "input-field", label: "Start Date", type: "DATE", value: filters.startDate, onChange: (event) => setFilters({ ...filters, startDate: event.value }), style: { width: '100%', height: '100%' } }),
-                    React__default.createElement(InputField$1, { className: "input-field", label: "End Date", type: "DATE", value: filters.endDate, onChange: (event) => setFilters({ ...filters, endDate: event.value }), style: { width: '100%', height: '100%' } }),
+                    React__default.createElement(InputField$1, { className: "input-field", label: "Start Date", type: "date", value: filters.startDate, onChange: (event) => setFilters({ ...filters, startDate: event.value }) }),
+                    React__default.createElement(InputField$1, { className: "input-field", label: "End Date", type: "date", value: filters.endDate, onChange: (event) => setFilters({ ...filters, endDate: event.value }) }),
                     React__default.createElement("div", { style: {
                             display: 'flex',
                             flexDirection: 'column',
@@ -5897,12 +6160,12 @@ class SelectionFiltersComponent extends ReactWrapperModule {
                             display: 'grid',
                             gridTemplateColumns: 'repeat(4, 1fr)',
                             gap: '16px',
-                        } }, filters.programAttributesFilters.map((filter, index) => (React__default.createElement("div", { key: index, style: { gridColumn: getAttributeColumnSpan(index) } }, filter.hasOptions && filter.options.length > 0 ? (React__default.createElement(SingleSelectField, { className: "single-select", label: filter.name || 'Select Option', type: filter.valueType, selected: filter.value, onChange: (event) => handleAttributeChange(index, event.selected) }, filter.options.map((option, i) => (React__default.createElement(SingleSelectOption, { key: crypto.randomUUID() || i, label: option.name, value: option.code }))))) : (React__default.createElement(InputField$1, { className: "input-field", label: filter.name || 'Program name', type: filter.valueType, value: filter.value, onChange: (event) => handleAttributeChange(index, event.value) })))))),
+                        } }, filters.programAttributesFilters.map((filter, index) => (React__default.createElement("div", { key: index, style: { gridColumn: getAttributeColumnSpan(index) } }, filter.hasOptions && filter.options.length > 0 ? (React__default.createElement(SingleSelectField, { className: "single-select", label: filter.name || 'Select Option', selected: filter.value, onChange: (event) => handleAttributeChange(index, event.selected) }, filter.options.map((option, i) => (React__default.createElement(SingleSelectOption, { key: crypto.randomUUID() || i, label: option.name, value: option.code }))))) : (React__default.createElement(InputField$1, { className: "input-field", label: filter.name || 'Program name', type: filter.valueType, value: filter.value, onChange: (event) => handleAttributeChange(index, event.value) })))))),
                     React__default.createElement("div", { style: {
                             display: 'grid',
                             gridTemplateColumns: 'repeat(4, 1fr)',
                             gap: '16px',
-                        } }, filters.programStageDataElementFilters.map((filter, index) => (React__default.createElement("div", { key: index, style: { gridColumn: getDataElementColumnSpan(index) } }, filter.hasOptions && filter.options.length > 0 ? (React__default.createElement(SingleSelectField, { className: "single-select", label: filter.name || 'Aggregation type', type: filter.valueType, selected: filter.value, onChange: (event) => handleDataElementChange(index, event.selected) }, filter.options.map((option, i) => (React__default.createElement(SingleSelectOption, { key: crypto.randomUUID() || i, label: option.name, value: option.code }))))) : (React__default.createElement(InputField$1, { className: "input-field", type: filter.valueType, label: filter.name || 'Program name', value: filter.value, onChange: (event) => handleDataElementChange(index, event.value) })))))),
+                        } }, filters.programStageDataElementFilters.map((filter, index) => (React__default.createElement("div", { key: index, style: { gridColumn: getDataElementColumnSpan(index) } }, filter.hasOptions && filter.options.length > 0 ? (React__default.createElement(SingleSelectField, { className: "single-select", label: filter.name || 'Aggregation type', selected: filter.value, onChange: (event) => handleDataElementChange(index, event.selected) }, filter.options.map((option, i) => (React__default.createElement(SingleSelectOption, { key: crypto.randomUUID() || i, label: option.name, value: option.code }))))) : (React__default.createElement(InputField$1, { className: "input-field", type: filter.valueType, label: filter.name || 'Program name', value: filter.value, onChange: (event) => handleDataElementChange(index, event.value) })))))),
                     React__default.createElement("div", { style: { textAlign: 'right', marginTop: '16px' } },
                         React__default.createElement(Button$1, { onClick: handleSearch }, "Search"))))));
         };