@iapps/ng-dhis2-ui 1.2.97 → 1.2.99

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

@@ -25,7 +25,7 @@ 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, CircularLoader as CircularLoader$1, Chip, DataTableToolbar, CalendarInput, TableHead, DataTableRow, DataTableColumnHeader, Layer as Layer$1, Popper, FlyoutMenu, MenuItem as MenuItem$1, IconMore24, DataTableCell, TableBody as TableBody$1, Pagination as Pagination$1, TableFoot, DataTable, DropdownButton, 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, 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, CircularLoader as CircularLoader$1, Chip, DataTableToolbar, DropdownButton, FlyoutMenu, CalendarInput, TableHead, DataTableRow, DataTableColumnHeader, Layer as Layer$1, Popper, MenuItem as MenuItem$1, IconMore24, DataTableCell, TableBody as TableBody$1, Pagination as Pagination$1, TableFoot, DataTable, 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';
@@ -3303,96 +3303,299 @@ const OrgUnitSelector = ({ hide, setHide, selectedOrgUnit, setSelectedOrgUnit, s
         React__default.createElement(ButtonStrip$1, { end: true },
             React__default.createElement(Button$1, { onClick: () => setHide(true), secondary: true }, "Close")))));
 
-const FilterToolbar = ({ orgUnitLabel, selectedOrgUnit, setSelectedOrgUnit, setOrgUnitState, defaultOrgUnit, setHide, startDateState, setStartDateState, endDateState, setEndDateState, visibleFilters, dateStates, inputValues, setInputValues, handleInputChange, handleInputChangeForSelectField, handleDateSelect, prevValue, setPrevValue, showAllFilters, setShowAllFilters, handleSearch, setTempStartDateState, setTempEndDateState, setTempOrgUnitState, tempStartDateState, tempEndDateState, tempOrgUnitState, dataQueryFiltersState, setDataQueryFiltersState, SetOrgUnitModalVisible, showEnrollmentDates, }) => (React__default.createElement(DataTableToolbar, { className: "table-top-toolbar" },
-    React__default.createElement("div", { style: {
-            display: 'flex',
-            // flexDirection: 'column',
-            gap: '10px',
-            flexWrap: 'wrap',
-        } },
+const FilterToolbar = ({ orgUnitLabel, selectedOrgUnit, setSelectedOrgUnit, setOrgUnitState, defaultOrgUnit, setHide, startDateState, setStartDateState, endDateState, setEndDateState, visibleFilters, dateStates, inputValues, setInputValues, handleInputChange, handleInputChangeForSelectField, handleDateSelect, showAllFilters, setShowAllFilters, setTempStartDateState, setTempEndDateState, setTempOrgUnitState, tempStartDateState, tempEndDateState, tempOrgUnitState, dataQueryFiltersState, setDataQueryFiltersState, SetOrgUnitModalVisible, showEnrollmentDates, handleAdditionalFilters, handleStartDateFilter, handleEndDateFilter, handleOrgUnitFilter, setDateStates, prevInputValues, setPrevInputValues, setTempDataQueryFiltersState, prevDateStates, setPrevDateStates, prevSelectedOrgUnit, setPrevSelectedOrgUnit, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [isOpenOrgUnitDropdown, setIsOpenOrgUnitDropdown] = useState(false);
+    const [openDropdownKey, setOpenDropdownKey] = useState(null);
+    //TODO: I HAVE DUPLICATED DROPDOWN AND CLEAR ICON IN MULTIPLE PLACES REQUIRED TO CREATE A REUSABLE DROPDOWN COMPONENT WITH THE CLEAR ICON TO AVOID DUPLICATION
+    const ClearIcon = ({ className, ...props }) => (React__default.createElement("svg", { className: className, ...props, viewBox: "0 0 24 24", width: 16, height: 16 },
+        React__default.createElement("path", { d: "M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z" })));
+    return (React__default.createElement(DataTableToolbar, { className: "table-top-toolbar" },
         React__default.createElement("div", { style: {
                 display: 'flex',
-                alignItems: 'center',
                 gap: '10px',
                 flexWrap: 'wrap',
             } },
-            React__default.createElement(InputField$1, { key: "location", label: orgUnitLabel ? orgUnitLabel : 'registering unit:', value: selectedOrgUnit, onFocus: () => {
-                    SetOrgUnitModalVisible(true);
-                    setHide(false);
-                }, className: "custom-input", clearable: true, onChange: (event) => {
-                    setSelectedOrgUnit(event.value);
-                    setOrgUnitState(defaultOrgUnit);
-                } }),
-            showEnrollmentDates && (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement(CalendarInput, { label: "Start date:", calendar: "gregory", locale: "en-GB", timeZone: "Africa/Dar_es_Salaam", className: "custom-input", 
-                    //clearable={!!tempStartDateState}
-                    //date={tempStartDateState || undefined}
-                    //date={tempStartDateState || "yyyy-mm-dd"}
-                    clearable: !!tempStartDateState && tempStartDateState !== 'dd-mm-yyyy', 
-                    // date={tempStartDateState || 'dd-mm-yyyy'}
-                    date: formatDateForDisplay(tempStartDateState), onDateSelect: (selectedDate) => {
-                        setTempStartDateState(selectedDate.calendarDateString);
-                        if (selectedDate.calendarDateString === null) {
-                            setStartDateState(selectedDate.calendarDateString);
-                        }
-                    } }),
-                React__default.createElement(CalendarInput, { label: "End date:", calendar: "gregory", locale: "en-GB", timeZone: "Africa/Dar_es_Salaam", className: "custom-input", clearable: !!tempEndDateState && tempEndDateState !== 'dd-mm-yyyy', 
-                    // date={tempEndDateState || 'dd-mm-yyyy'}
-                    date: formatDateForDisplay(tempEndDateState), onDateSelect: (selectedDate) => {
-                        setTempEndDateState(selectedDate.calendarDateString);
-                        if (selectedDate.calendarDateString === null) {
-                            setEndDateState(selectedDate.calendarDateString);
-                        }
-                    } })))),
-        (visibleFilters ?? []).map(({ label, key, valueType, options }) => {
-            if (valueType === 'DATE') {
-                return (React__default.createElement(CalendarInput, { key: key, label: `${label}:`, calendar: "gregory", locale: "en-GB", timeZone: "Africa/Dar_es_Salaam", className: "custom-input", clearable: !!dateStates[key], date: dateStates[key], onDateSelect: (selectedDate) => {
-                        handleDateSelect(key, selectedDate);
-                        const filteredFilters = dataQueryFiltersState.filter((f) => f.attribute !== key);
-                        if (selectedDate.calendarDateString === null) {
-                            setDataQueryFiltersState(filteredFilters);
-                        }
-                    } }));
-            }
-            if (options && options.options.length > 0) {
-                return (React__default.createElement(SingleSelectField, { key: key, label: `${label}:`, selected: inputValues[key] || '', className: "custom-select-input", clearable: true, onChange: ({ selected }) => {
-                        setInputValues((prevValues) => ({
-                            ...prevValues,
-                            [key]: selected ?? '',
-                        }));
-                        handleInputChangeForSelectField(key, selected ?? '');
-                        const filteredFilters = dataQueryFiltersState.filter((f) => f.attribute !== key);
-                        if (selected === '') {
+            React__default.createElement("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '10px',
+                    flexWrap: 'wrap',
+                } },
+                React__default.createElement(DropdownButton, { name: "customDropdown", open: isOpenOrgUnitDropdown, onClick: () => setIsOpenOrgUnitDropdown(!isOpenOrgUnitDropdown), component: React__default.createElement("div", null,
+                        React__default.createElement(FlyoutMenu, null,
+                            React__default.createElement("div", { style: { padding: '16px' } },
+                                React__default.createElement(InputField$1, { key: "location", placeholder: orgUnitLabel ? orgUnitLabel : 'registering unit', value: selectedOrgUnit, onFocus: () => {
+                                        SetOrgUnitModalVisible(true);
+                                        setHide(false);
+                                    } }),
+                                React__default.createElement("div", { style: {
+                                        paddingTop: '8px',
+                                        display: 'flex',
+                                        justifyContent: 'flex-end',
+                                    } },
+                                    React__default.createElement(ButtonStrip$1, null,
+                                        React__default.createElement(Button$1, { primary: true, disabled: !selectedOrgUnit, onClick: () => {
+                                                setPrevSelectedOrgUnit(selectedOrgUnit);
+                                                handleOrgUnitFilter();
+                                                setIsOpenOrgUnitDropdown(false);
+                                            } }, "update"),
+                                        React__default.createElement(Button$1, { disabled: !selectedOrgUnit, onClick: () => {
+                                                setSelectedOrgUnit('');
+                                                setPrevSelectedOrgUnit('');
+                                                setOrgUnitState(defaultOrgUnit);
+                                                setTempOrgUnitState(defaultOrgUnit);
+                                                setIsOpenOrgUnitDropdown(false);
+                                            } }, "reset filter")))))) },
+                    orgUnitLabel ? orgUnitLabel : 'registering unit',
+                    ' ',
+                    prevSelectedOrgUnit && ':',
+                    " ",
+                    prevSelectedOrgUnit,
+                    prevSelectedOrgUnit && (React__default.createElement("span", { onClick: (event) => {
+                            event.stopPropagation();
+                            setSelectedOrgUnit('');
+                            setPrevSelectedOrgUnit('');
+                            setOrgUnitState(defaultOrgUnit);
+                            setTempOrgUnitState(defaultOrgUnit);
+                            setIsOpenOrgUnitDropdown(false);
+                        }, style: { display: 'inline-flex', alignItems: 'center' } },
+                        React__default.createElement(ClearIcon, { className: "my-icon-class" })))),
+                showEnrollmentDates && (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(DropdownButton, { name: "customDropdown", open: isOpen, onClick: () => setIsOpen(!isOpen), component: React__default.createElement("div", null,
+                            React__default.createElement(FlyoutMenu, null,
+                                React__default.createElement("div", { style: { padding: '16px' } },
+                                    React__default.createElement("div", { style: {
+                                            display: 'flex',
+                                            alignItems: 'flex-end',
+                                            gap: '16px',
+                                        } },
+                                        React__default.createElement(CalendarInput, { calendar: "gregory", locale: "en-GB", timeZone: "Africa/Dar_es_Salaam", date: formatDateForDisplay(tempStartDateState), onDateSelect: (selectedDate) => {
+                                                setTempStartDateState(selectedDate.calendarDateString);
+                                            } }),
+                                        React__default.createElement("span", { style: { paddingBottom: '8px' } }, "to"),
+                                        React__default.createElement(CalendarInput, { calendar: "gregory", locale: "en-GB", timeZone: "Africa/Dar_es_Salaam", date: formatDateForDisplay(tempEndDateState), onDateSelect: (selectedDate) => {
+                                                setTempEndDateState(selectedDate.calendarDateString);
+                                            } })),
+                                    React__default.createElement("div", { style: {
+                                            paddingTop: '8px',
+                                            display: 'flex',
+                                            justifyContent: 'flex-end',
+                                        } },
+                                        React__default.createElement(ButtonStrip$1, null,
+                                            React__default.createElement(Button$1, { primary: true, onClick: () => {
+                                                    handleStartDateFilter();
+                                                    handleEndDateFilter();
+                                                    setIsOpen(false);
+                                                } }, "update"),
+                                            React__default.createElement(Button$1, { onClick: () => {
+                                                    setStartDateState(null);
+                                                    setTempEndDateState(null);
+                                                    setTempStartDateState(null);
+                                                    setEndDateState(null);
+                                                    setIsOpen(false);
+                                                } }, "reset")))))) },
+                        "registration dates ",
+                        (startDateState || endDateState) && ':',
+                        ' ',
+                        startDateState,
+                        endDateState && ` - ${endDateState}`,
+                        (startDateState || endDateState) && (React__default.createElement("span", { onClick: (event) => {
+                                event.stopPropagation();
+                                setStartDateState(null);
+                                setTempEndDateState(null);
+                                setTempStartDateState(null);
+                                setEndDateState(null);
+                                setIsOpen(false);
+                            }, style: { display: 'inline-flex', alignItems: 'center' } },
+                            React__default.createElement(ClearIcon, { className: "my-icon-class" }))))))),
+            (visibleFilters ?? []).map(({ label, key, valueType, options, type }) => {
+                if (valueType === 'DATE') {
+                    return (React__default.createElement(DropdownButton, { name: "customDropdown", open: openDropdownKey === key, onClick: () => {
+                            setOpenDropdownKey(openDropdownKey === key ? null : key);
+                        }, component: React__default.createElement("div", null,
+                            React__default.createElement(FlyoutMenu, null,
+                                React__default.createElement("div", { style: { padding: '16px' } },
+                                    React__default.createElement(CalendarInput, { key: key, calendar: "gregory", locale: "en-GB", timeZone: "Africa/Dar_es_Salaam", date: dateStates[key], onDateSelect: (selectedDate) => {
+                                            handleDateSelect(key, selectedDate, type);
+                                        } }),
+                                    React__default.createElement("div", { style: {
+                                            paddingTop: '8px',
+                                            display: 'flex',
+                                            justifyContent: 'flex-end',
+                                        } },
+                                        React__default.createElement(ButtonStrip$1, null,
+                                            React__default.createElement(Button$1, { primary: true, onClick: () => {
+                                                    setPrevDateStates((prev) => ({
+                                                        ...prev,
+                                                        [key]: dateStates[key],
+                                                    }));
+                                                    handleAdditionalFilters();
+                                                    setOpenDropdownKey(null);
+                                                } }, "update"),
+                                            React__default.createElement(Button$1, { onClick: () => {
+                                                    setIsOpen(false);
+                                                } }, "reset")))))) },
+                        label,
+                        " ",
+                        prevDateStates[key] && ':',
+                        " ",
+                        prevDateStates[key],
+                        prevDateStates[key] && (React__default.createElement("span", { onClick: (event) => {
+                                event.stopPropagation();
+                                setDateStates((prev) => ({
+                                    ...prev,
+                                    [key]: '',
+                                }));
+                                setPrevDateStates((prev) => ({
+                                    ...prev,
+                                    [key]: '',
+                                }));
+                                const filteredFilters = dataQueryFiltersState.filter((f) => f.attribute !== key);
+                                setDataQueryFiltersState(filteredFilters);
+                                setTempDataQueryFiltersState(filteredFilters);
+                                setOpenDropdownKey(null);
+                            }, style: { display: 'inline-flex', alignItems: 'center' } },
+                            React__default.createElement(ClearIcon, { className: "my-icon-class" })))));
+                }
+                if (options && options.options.length > 0) {
+                    return (React__default.createElement(DropdownButton, { name: "customDropdown", open: openDropdownKey === key, onClick: () => {
+                            setOpenDropdownKey(openDropdownKey === key ? null : key);
+                        }, component: React__default.createElement("div", null,
+                            React__default.createElement(FlyoutMenu, null,
+                                React__default.createElement("div", { style: { padding: '16px' } },
+                                    React__default.createElement(SingleSelectField, { key: key, placeholder: `${label}`, selected: inputValues[key] || '', onChange: ({ selected }) => {
+                                            setInputValues((prevValues) => ({
+                                                ...prevValues,
+                                                [key]: selected ?? '',
+                                            }));
+                                            handleInputChangeForSelectField(key, selected ?? '', type);
+                                        } }, (options.options ?? []).map((opt) => (React__default.createElement(SingleSelectOption, { key: opt.id, label: opt.name, value: opt.code })))),
+                                    React__default.createElement("div", { style: {
+                                            paddingTop: '8px',
+                                            display: 'flex',
+                                            justifyContent: 'flex-end',
+                                        } },
+                                        React__default.createElement(ButtonStrip$1, null,
+                                            React__default.createElement(Button$1, { primary: true, disabled: !inputValues[key] ||
+                                                    inputValues[key] === prevInputValues[key], onClick: () => {
+                                                    setPrevInputValues((prev) => ({
+                                                        ...prev,
+                                                        [key]: inputValues[key],
+                                                    }));
+                                                    handleAdditionalFilters();
+                                                    setOpenDropdownKey(null);
+                                                } }, "update"),
+                                            React__default.createElement(Button$1, { disabled: !inputValues[key], onClick: () => {
+                                                    setInputValues((prevValues) => ({
+                                                        ...prevValues,
+                                                        [key]: '',
+                                                    }));
+                                                    setPrevInputValues((prevValues) => ({
+                                                        ...prevValues,
+                                                        [key]: '',
+                                                    }));
+                                                    handleInputChangeForSelectField(key, '', type);
+                                                    const filteredFilters = dataQueryFiltersState.filter((f) => f.attribute !== key);
+                                                    setDataQueryFiltersState(filteredFilters);
+                                                    setTempDataQueryFiltersState(filteredFilters);
+                                                    setOpenDropdownKey(null);
+                                                } }, "reset")))))) },
+                        label,
+                        " ",
+                        prevInputValues[key] && ':',
+                        " ",
+                        prevInputValues[key],
+                        prevInputValues[key] && (React__default.createElement("span", { onClick: (event) => {
+                                event.stopPropagation();
+                                setInputValues((prevValues) => ({
+                                    ...prevValues,
+                                    [key]: '',
+                                }));
+                                setPrevInputValues((prevValues) => ({
+                                    ...prevValues,
+                                    [key]: '',
+                                }));
+                                handleInputChangeForSelectField(key, '', type);
+                                const filteredFilters = dataQueryFiltersState.filter((f) => f.attribute !== key);
+                                setDataQueryFiltersState(filteredFilters);
+                                setTempDataQueryFiltersState(filteredFilters);
+                                setOpenDropdownKey(null);
+                            }, style: { display: 'inline-flex', alignItems: 'center' } },
+                            React__default.createElement(ClearIcon, { className: "my-icon-class" })))));
+                }
+                return (React__default.createElement(DropdownButton, { name: "customDropdown", open: openDropdownKey === key, onClick: () => {
+                        setOpenDropdownKey(openDropdownKey === key ? null : key);
+                    }, component: React__default.createElement("div", null,
+                        React__default.createElement(FlyoutMenu, null,
+                            React__default.createElement("div", { style: { padding: '16px' } },
+                                React__default.createElement(InputField$1, { key: key, placeholder: `${label}`, value: inputValues[key] || '', onChange: (e) => {
+                                        const currentValue = 'target' in e ? e.target.value : e.value ?? '';
+                                        setInputValues((prevValues) => ({
+                                            ...prevValues,
+                                            [key]: currentValue,
+                                        }));
+                                        handleInputChange(key, currentValue, type);
+                                    } }),
+                                React__default.createElement("div", { style: {
+                                        paddingTop: '8px',
+                                        display: 'flex',
+                                        justifyContent: 'flex-end',
+                                    } },
+                                    React__default.createElement(ButtonStrip$1, null,
+                                        React__default.createElement(Button$1, { primary: true, disabled: !inputValues[key] ||
+                                                inputValues[key] === prevInputValues[key], onClick: () => {
+                                                setPrevInputValues((prev) => ({
+                                                    ...prev,
+                                                    [key]: inputValues[key],
+                                                }));
+                                                handleAdditionalFilters();
+                                                setOpenDropdownKey(null);
+                                            } }, "update"),
+                                        React__default.createElement(Button$1, { disabled: !inputValues[key], onClick: () => {
+                                                setInputValues((prevValues) => ({
+                                                    ...prevValues,
+                                                    [key]: '',
+                                                }));
+                                                setPrevInputValues((prevValues) => ({
+                                                    ...prevValues,
+                                                    [key]: '',
+                                                }));
+                                                // Remove the filter for this key
+                                                const filteredFilters = dataQueryFiltersState.filter((f) => f.attribute !== key);
+                                                setDataQueryFiltersState(filteredFilters);
+                                                setTempDataQueryFiltersState(filteredFilters);
+                                                setOpenDropdownKey(null);
+                                            } }, "reset")))))) },
+                    label,
+                    " ",
+                    prevInputValues[key] && ':',
+                    " ",
+                    prevInputValues[key],
+                    prevInputValues[key] && (React__default.createElement("span", { onClick: (event) => {
+                            event.stopPropagation();
+                            // Clear the input value for this key
+                            setInputValues((prevValues) => ({
+                                ...prevValues,
+                                [key]: '',
+                            }));
+                            setPrevInputValues((prevValues) => ({
+                                ...prevValues,
+                                [key]: '',
+                            }));
+                            // Remove the filter for this key
+                            const filteredFilters = dataQueryFiltersState.filter((f) => f.attribute !== key);
                             setDataQueryFiltersState(filteredFilters);
-                        }
-                    } }, (options.options ?? []).map((opt) => (React__default.createElement(SingleSelectOption, { key: opt.id, label: opt.name, value: opt.code })))));
-            }
-            return (React__default.createElement(InputField$1, { key: key, label: `${label}:`, className: "custom-input", value: inputValues[key] || '', clearable: true, onChange: (e) => {
-                    const currentValue = 'target' in e ? e.target.value : e.value ?? '';
-                    setInputValues((prevValues) => ({
-                        ...prevValues,
-                        [key]: currentValue,
-                    }));
-                    const filteredFilters = dataQueryFiltersState.filter((f) => f.attribute !== key);
-                    if (currentValue === '') {
-                        setDataQueryFiltersState(filteredFilters);
-                    }
-                }, onBlur: (e) => {
-                    const currentValue = 'target' in e ? e.target.value : e.value ?? '';
-                    if (currentValue !== '' && currentValue !== prevValue) {
-                        handleInputChange(key, currentValue);
-                        setPrevValue(currentValue);
-                    }
-                } }));
-        }),
-        React__default.createElement("div", { style: {
-                display: 'flex',
-                // alignItems: 'center',
-                gap: '10px',
-                // flexWrap: 'wrap',
-            } },
-            React__default.createElement(Button$1, { onClick: handleSearch }, "Search"),
-            React__default.createElement(Button$1, { onClick: () => setShowAllFilters(!showAllFilters) }, showAllFilters ? 'Less Filters' : 'More Filters')))));
+                            setTempDataQueryFiltersState(filteredFilters);
+                        }, style: { display: 'inline-flex', alignItems: 'center' } },
+                        React__default.createElement(ClearIcon, { className: "my-icon-class" })))));
+            }),
+            React__default.createElement("div", { style: {
+                    display: 'flex',
+                    gap: '10px',
+                } },
+                React__default.createElement(Button$1, { onClick: () => setShowAllFilters(!showAllFilters) }, showAllFilters ? 'Less Filters' : 'More Filters')))));
+};
 function formatDateForDisplay(dateString) {
     if (!dateString || dateString === 'dd-mm-yyyy')
         return 'dd-mm-yyyy';
@@ -3639,7 +3842,13 @@ const TableRow = ({ row, columns, getTextColorFromBackGround, actionOptions, act
 //     )}
 //   </DHISTableBody>
 // );
-const TableBody = ({ data, columns, getTextColorFromBackGround, actionOptions, actionOptionOrientation, actionSelected, selectedRows, onRowToggle, selectable, showActionButtons }) => (React__default.createElement(TableBody$1, null, data.length > 0 ? (data.map((row) => (React__default.createElement(TableRow, { key: row.index.value, row: row, columns: columns, getTextColorFromBackGround: getTextColorFromBackGround, actionOptions: actionOptions, actionOptionOrientation: actionOptionOrientation, actionSelected: actionSelected, isChecked: selectedRows.some((r) => r.index?.value === row.index?.value), onToggle: onRowToggle, selectable: selectable, showActionButtons: showActionButtons })))) : (React__default.createElement(DataTableRow, null,
+const TableBody = ({ data, columns, getTextColorFromBackGround, actionOptions, actionOptionOrientation, actionSelected, selectedRows, onRowToggle, selectable, showActionButtons, error, }) => (React__default.createElement(TableBody$1, null, error ? (React__default.createElement(DataTableRow, null,
+    React__default.createElement(DataTableCell, { colSpan: columns.length.toString(), style: {
+            textAlign: 'center',
+            fontWeight: 'bold',
+            color: 'red',
+            padding: '20px',
+        } }, error))) : data.length > 0 ? (data.map((row) => (React__default.createElement(TableRow, { key: row.index.value, row: row, columns: columns, getTextColorFromBackGround: getTextColorFromBackGround, actionOptions: actionOptions, actionOptionOrientation: actionOptionOrientation, actionSelected: actionSelected, isChecked: selectedRows.some((r) => r.index?.value === row.index?.value), onToggle: onRowToggle, selectable: selectable, showActionButtons: showActionButtons })))) : (React__default.createElement(DataTableRow, null,
     React__default.createElement(DataTableCell, { colSpan: columns.length.toString(), style: {
             textAlign: 'center',
             fontWeight: 'bold',
@@ -3696,7 +3905,7 @@ const TableFooter = ({ pager, setPager, columns }) => {
 //       </DataTable>
 //     );
 //   };
-const LineListTable = ({ columns, data, pager, setPager, getTextColorFromBackGround, actionOptions, actionOptionOrientation, actionSelected, selectable, rowsSelected, showActionButtons }) => {
+const LineListTable = ({ columns, data, pager, setPager, getTextColorFromBackGround, actionOptions, actionOptionOrientation, actionSelected, selectable, rowsSelected, showActionButtons, error }) => {
     const [selectedRows, setSelectedRows] = useState([]);
     const handleRowToggle = (row) => {
         const exists = selectedRows.find((r) => r.index?.value === row.index?.value);
@@ -3713,7 +3922,7 @@ const LineListTable = ({ columns, data, pager, setPager, getTextColorFromBackGro
     };
     return (React__default.createElement(DataTable, null,
         React__default.createElement(TableHeader, { columns: columns, allSelected: selectedRows.length === data.length && data.length > 0, onSelectAll: handleSelectAll, selectable: selectable, showActionButtons: showActionButtons }),
-        React__default.createElement(TableBody, { data: data, columns: columns, getTextColorFromBackGround: getTextColorFromBackGround, actionOptions: actionOptions, actionOptionOrientation: actionOptionOrientation, actionSelected: actionSelected, selectedRows: selectedRows, onRowToggle: handleRowToggle, selectable: selectable, showActionButtons: showActionButtons }),
+        React__default.createElement(TableBody, { data: data, columns: columns, getTextColorFromBackGround: getTextColorFromBackGround, actionOptions: actionOptions, actionOptionOrientation: actionOptionOrientation, actionSelected: actionSelected, selectedRows: selectedRows, onRowToggle: handleRowToggle, selectable: selectable, showActionButtons: showActionButtons, error: error }),
         React__default.createElement(TableFooter, { columns: columns, pager: pager, setPager: setPager })));
 };
 
@@ -3743,7 +3952,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
             type: Injectable
         }], ctorParameters: () => [{ type: i1.NgxDhis2HttpClientService }] });
 
-const getTrackedEntityTableData = (response, programId, pager, metaData) => {
+const getTrackedEntityTableData = (response, programId, pager, metaData, searcheableDataElements) => {
     const teisRaw = response.data
         .trackedEntityInstances;
     const teis = Array.isArray(teisRaw)
@@ -3758,12 +3967,19 @@ const getTrackedEntityTableData = (response, programId, pager, metaData) => {
         label: trackedEntityAttribute.formName ?? trackedEntityAttribute.name,
         key: trackedEntityAttribute.id,
     }));
-    // const dataElementColumns = metaData.displayInListDataElements
-    //   .sort((a, b) => a.sortOrder! - b.sortOrder!)
-    //   .map((dataElement) => ({
-    //     label: dataElement.formName || dataElement.name,
-    //     key: dataElement.id,
-    //   }));
+    const tableSearcheableDataElements = metaData
+        .programStages.sort((a, b) => a.sortOrder - b.sortOrder)
+        .flatMap((stage) => stage
+        .programStageDataElements.filter((psde) => psde.displayInReports)
+        .sort((a, b) => a.sortOrder - b.sortOrder)
+        .map((psde) => ({
+        label: psde.dataElement.formName || psde.dataElement.name,
+        key: psde.dataElement.id,
+        valueType: psde.dataElement.valueType,
+        options: psde.dataElement.optionSet,
+        type: 'dataElement',
+    }))
+        .filter((col) => searcheableDataElements.includes(col.key)));
     const dataElementColumns = metaData
         .programStages.sort((a, b) => a.sortOrder - b.sortOrder) // Sorts stages by sortOrder
         .flatMap((stage) => stage
@@ -3795,6 +4011,7 @@ const getTrackedEntityTableData = (response, programId, pager, metaData) => {
         key: attr.id,
         valueType: attr.valueType,
         options: attr.optionSet ?? undefined,
+        type: 'attribute',
     }));
     const tableData = teis.map((tei, idx) => {
         const row = {
@@ -3881,7 +4098,7 @@ const getTrackedEntityTableData = (response, programId, pager, metaData) => {
     return {
         columns: tableColumns,
         data: tableData,
-        filteredEntityColumns: tableFilters,
+        filteredEntityColumns: [...tableFilters, ...tableSearcheableDataElements],
         orgUnitLabel: orgUnitLabel,
     };
 };
@@ -3962,6 +4179,7 @@ class LineListTableComponent extends ReactWrapperModule {
         this.showActionButtons = true;
         this.showEnrollmentDates = true;
         this.showDownloadButton = false;
+        this.searcheableDataElements = [];
         this.reactStateUpdaters = null;
         this.setReactStateUpdaters = (updaters) => {
             this.reactStateUpdaters = updaters;
@@ -3990,27 +4208,29 @@ class LineListTableComponent extends ReactWrapperModule {
             const [endDateState, setEndDateState] = useState(this.endDate);
             const [tempEndDateState, setTempEndDateState] = useState(this.endDate);
             const [loading, setLoading] = useState(false);
-            const [metaDataLoadng, setMetaDataLoading] = useState(false);
             const [filteredColumns, setFilteredColumns] = useState();
             const [inputValues, setInputValues] = useState({});
             const [orgUnitLabel, setOrgUnitLabel] = useState('');
             const [selectedOrgUnit, setSelectedOrgUnit] = useState('');
+            const [prevSelectedOrgUnit, setPrevSelectedOrgUnit] = useState('');
             const [hide, setHide] = useState(true);
             const [showAllFilters, setShowAllFilters] = useState(false);
             const visibleFilters = showAllFilters
                 ? filteredColumns ?? []
-                : (filteredColumns ?? []).slice(0, 0);
+                : (filteredColumns ?? []).slice(0, 5);
             // const visibleFilters = showAllFilters
             //   ? filteredColumns ?? []
             //   : filteredColumns ?? []).slice(0, 2);
             const defaultOrgUnit = this.orgUnit;
-            const [prevValue, setPrevValue] = useState();
             const [dateStates, setDateStates] = useState({});
+            const [prevDateStates, setPrevDateStates] = useState({});
             const [metaData, setMetaData] = useState(null);
             const [selectable, setSelectable] = useState(this.allowRowsSelection);
             const [triggerRefetch, setTriggerRefetch] = useState(this.triggerRefetch);
             const [showActionButtons, setShowActionButtons] = useState(this.showActionButtons);
             const [orgUnitModalVisible, setOrgUnitModalVisible] = useState(false);
+            const [error, setError] = useState(null);
+            const [prevInputValues, setPrevInputValues] = useState({});
             const d2 = window.d2Web;
             // Stores updaters in refs for Angular to access
             const updateRefs = useRef({
@@ -4027,24 +4247,30 @@ class LineListTableComponent extends ReactWrapperModule {
             });
             useEffect(() => {
                 this.setReactStateUpdaters?.(updateRefs.current);
-            }, []);
-            useEffect(() => {
-                setLoading(true);
                 const fetchmetaData = async () => {
+                    setLoading(true);
+                    if (!this.programId) {
+                        setMetaData(null);
+                        setLoading(false);
+                        return;
+                    }
+                    setError(null);
                     try {
                         const trackerResponse = (await d2.trackerModule.trackedEntity
                             .setProgram(this.programId)
                             .getMetaData({ skipProgramRules: true }));
+                        if (!trackerResponse || !trackerResponse.programType) {
+                            throw new Error('failed to load data.');
+                        }
                         const data = trackerResponse;
                         setMetaData(data);
                     }
                     catch (error) {
-                        console.error('Failed to metadata:', error);
+                        setError(error);
+                        setLoading(false);
                     }
                 };
-                if (this.programId) {
-                    fetchmetaData();
-                }
+                fetchmetaData();
             }, []);
             useEffect(() => {
                 if (!metaData) {
@@ -4054,122 +4280,141 @@ class LineListTableComponent extends ReactWrapperModule {
                 const isEvent = metaData.programType === 'WITHOUT_REGISTRATION';
                 const endDate = endDateState ?? format(addDays(new Date(), 1), 'yyyy-MM-dd');
                 if (this.programStageId || isEvent) {
-                    setLoading(true);
-                    d2.eventModule.event
-                        .setEndDate(endDate)
-                        .setStartDate(startDateState)
-                        .setProgram(this.programId)
-                        .setProgramStage(this.programStageId)
-                        .setOrgUnit(orgUnitState)
-                        .setOuMode(this.ouMode)
-                        .setPagination(new Pager({
-                        pageSize: pager.pageSize,
-                        page: pager.page,
-                    }))
-                        .get()
-                        .then((response) => {
-                        const eventsResponse = {
-                            events: response.data,
-                            pager: pager,
-                            // orgUnitsMap: fetchedOrgUnits,
-                        };
-                        const { columns, data } = getEvents({ data: eventsResponse }, this.programStageId, pager, metaData);
-                        // const filterableColumnIdsSet = new Set(
-                        //   this.filterableColumnIds
-                        // );
-                        // const updatedFilterableColumnIds: ColumnDefinition[] =
-                        //   columns.filter((column) =>
-                        //     filterableColumnIdsSet.has(column.key)
-                        //   );
-                        // const finalColumns: ColumnDefinition[] = addActionsColumn(
-                        //   [{ label: '#', key: 'index' }, ...updatedFilterableColumnIds],
-                        //   this.actionOptions
-                        // );
-                        let updatedFilterableColumnIds;
-                        if (Array.isArray(this.filterableColumnIds) && this.filterableColumnIds.length > 0) {
-                            const filterableColumnIdsSet = new Set(this.filterableColumnIds);
-                            updatedFilterableColumnIds = columns.filter(column => filterableColumnIdsSet.has(column.key));
+                    const fetchEventData = async () => {
+                        try {
+                            setError(null);
+                            setLoading(true);
+                            const response = await d2.eventModule.event
+                                .setEndDate(endDate)
+                                .setStartDate(startDateState)
+                                .setProgram(this.programId)
+                                .setProgramStage(this.programStageId)
+                                .setOrgUnit(orgUnitState)
+                                .setOuMode(this.ouMode)
+                                .setPagination(new Pager({
+                                pageSize: pager.pageSize,
+                                page: pager.page,
+                            }))
+                                .get();
+                            if (response.responseStatus.status !== 200) {
+                                throw new Error('failed to load data.');
+                            }
+                            const eventsResponse = {
+                                events: response.data,
+                                pager: pager,
+                                // orgUnitsMap: fetchedOrgUnits,
+                            };
+                            const { columns, data } = getEvents({ data: eventsResponse }, this.programStageId, pager, metaData);
+                            // const filterableColumnIdsSet = new Set(
+                            //   this.filterableColumnIds
+                            // );
+                            // const updatedFilterableColumnIds: ColumnDefinition[] =
+                            //   columns.filter((column) =>
+                            //     filterableColumnIdsSet.has(column.key)
+                            //   );
+                            // const finalColumns: ColumnDefinition[] = addActionsColumn(
+                            //   [{ label: '#', key: 'index' }, ...updatedFilterableColumnIds],
+                            //   this.actionOptions
+                            // );
+                            let updatedFilterableColumnIds;
+                            if (Array.isArray(this.filterableColumnIds) &&
+                                this.filterableColumnIds.length > 0) {
+                                const filterableColumnIdsSet = new Set(this.filterableColumnIds);
+                                updatedFilterableColumnIds = columns.filter((column) => filterableColumnIdsSet.has(column.key));
+                            }
+                            else {
+                                updatedFilterableColumnIds = columns;
+                            }
+                            const finalColumns = addActionsColumn([{ label: '#', key: 'index' }, ...updatedFilterableColumnIds], this.actionOptions);
+                            const pagerResponse = response.pagination;
+                            setColumns(finalColumns);
+                            setData(data);
+                            setPager(new Pager(pagerResponse || {}));
                         }
-                        else {
-                            updatedFilterableColumnIds = columns;
+                        catch {
+                            console.error('Failed to fetch event data:', error);
+                            setError('Could not load records. Please reload.');
                         }
-                        const finalColumns = addActionsColumn([{ label: '#', key: 'index' }, ...updatedFilterableColumnIds], this.actionOptions);
-                        const pagerResponse = response.pagination;
-                        setLoading(false);
-                        setColumns(finalColumns);
-                        setData(data);
-                        setPager(new Pager(pagerResponse || {}));
-                    });
+                        finally {
+                            setLoading(false);
+                        }
+                    };
+                    fetchEventData();
                 }
                 else if (isTracker) {
-                    setLoading(true);
-                    d2.trackerModule.trackedEntity
-                        .setEndDate(endDate)
-                        .setStartDate(startDateState)
-                        .setProgram(this.programId)
-                        .setProgramStage(this.programStageId)
-                        .setOrgUnit(orgUnitState)
-                        .setOuMode(this.ouMode)
-                        .setStatus(this.enrollmentStatus)
-                        .setEventStatus(this.eventStatus?.status, this.eventStatus?.programStage)
-                        .setFilters(dataQueryFiltersState)
-                        .setPagination(new Pager({
-                        pageSize: pager.pageSize,
-                        page: pager.page,
-                    }))
-                        .setOrderCriterias([
-                        new DataOrderCriteria().setField('createdAt').setOrder('desc'),
-                    ])
-                        .get()
-                        .then((response) => {
-                        const trackedEntityInstances = Array.isArray(response.data)
-                            ? response.data
-                            : [response.data];
-                        const orgUnitIdsFromEnrollments = new Set(trackedEntityInstances.map((tei) => tei.latestEnrollment.orgUnit));
-                        const orgUnitsFromAttributes = new Set(trackedEntityInstances.flatMap((tei) => tei.attributes
-                            ?.filter((attr) => attr.valueType === 'ORGANISATION_UNIT')
-                            .map((attr) => attr.value) || []));
-                        const uniqueOrgUnitIds = [
-                            ...orgUnitIdsFromEnrollments,
-                            ...orgUnitsFromAttributes,
-                        ];
-                        this.lineListService.fetchOrgUnits(uniqueOrgUnitIds).subscribe({
-                            next: (fetchedOrgUnits) => {
-                                const trackedEntityResponse = {
-                                    trackedEntityInstances: response.data,
-                                    pager: pager,
-                                    orgUnitsMap: fetchedOrgUnits,
-                                };
-                                const { columns, data, filteredEntityColumns, orgUnitLabel } = getTrackedEntityTableData({ data: trackedEntityResponse }, this.programId, pager, metaData);
-                                setFilteredColumns((prev) => filteredEntityColumns.length > 0
-                                    ? filteredEntityColumns
-                                    : prev);
-                                let updatedFilterableColumnIds;
-                                if (Array.isArray(this.filterableColumnIds) && this.filterableColumnIds.length > 0) {
-                                    const filterableColumnIdsSet = new Set(this.filterableColumnIds);
-                                    updatedFilterableColumnIds = columns.filter(column => filterableColumnIdsSet.has(column.key));
-                                }
-                                else {
-                                    updatedFilterableColumnIds = columns;
-                                }
-                                const finalColumns = addActionsColumn([{ label: '#', key: 'index' }, ...updatedFilterableColumnIds], this.actionOptions);
-                                // const finalColumns: ColumnDefinition[] = addActionsColumn(
-                                //   [{ label: '#', key: 'index' }, ...columns],
-                                //   this.actionOptions
-                                // );
-                                const pagerResponse = response.pagination;
-                                setLoading(false);
-                                setColumns(finalColumns);
-                                setData(data);
-                                setPager(new Pager(pagerResponse || {}));
-                                setOrgUnitLabel(orgUnitLabel);
-                            },
-                            error: (err) => {
-                                console.error('Error fetching org units:', err);
-                                setLoading(false);
-                            },
-                        });
-                    });
+                    const fetchTrackerData = async () => {
+                        try {
+                            setError(null);
+                            setLoading(true);
+                            const response = await d2.trackerModule.trackedEntity
+                                .setEndDate(endDate)
+                                .setStartDate(startDateState)
+                                .setProgram(this.programId)
+                                .setProgramStage(this.programStageId)
+                                .setOrgUnit(orgUnitState)
+                                .setOuMode(this.ouMode)
+                                .setStatus(this.enrollmentStatus)
+                                .setEventStatus(this.eventStatus?.status, this.eventStatus?.programStage)
+                                .setFilters(dataQueryFiltersState)
+                                .setPagination(new Pager({
+                                pageSize: pager.pageSize,
+                                page: pager.page,
+                            }))
+                                .setOrderCriterias([
+                                new DataOrderCriteria().setField('createdAt').setOrder('desc'),
+                            ])
+                                .get();
+                            if (response.responseStatus.status !== 200) {
+                                throw new Error('failed to load data.');
+                            }
+                            const trackedEntityInstances = Array.isArray(response.data)
+                                ? response.data
+                                : [response.data];
+                            const orgUnitIdsFromEnrollments = new Set(trackedEntityInstances.map((tei) => tei.latestEnrollment.orgUnit));
+                            const orgUnitsFromAttributes = new Set(trackedEntityInstances.flatMap((tei) => tei.attributes
+                                ?.filter((attr) => attr.valueType === 'ORGANISATION_UNIT')
+                                .map((attr) => attr.value) || []));
+                            const uniqueOrgUnitIds = [
+                                ...orgUnitIdsFromEnrollments,
+                                ...orgUnitsFromAttributes,
+                            ];
+                            const fetchedOrgUnits = await firstValueFrom(this.lineListService.fetchOrgUnits(uniqueOrgUnitIds));
+                            const trackedEntityResponse = {
+                                trackedEntityInstances: response.data,
+                                pager: pager,
+                                orgUnitsMap: fetchedOrgUnits,
+                            };
+                            const { columns, data, filteredEntityColumns, orgUnitLabel } = getTrackedEntityTableData({ data: trackedEntityResponse }, this.programId, pager, metaData, this.searcheableDataElements);
+                            setFilteredColumns((prev) => filteredEntityColumns.length > 0 ? filteredEntityColumns : prev);
+                            let updatedFilterableColumnIds;
+                            if (Array.isArray(this.filterableColumnIds) &&
+                                this.filterableColumnIds.length > 0) {
+                                const filterableColumnIdsSet = new Set(this.filterableColumnIds);
+                                updatedFilterableColumnIds = columns.filter((column) => filterableColumnIdsSet.has(column.key));
+                            }
+                            else {
+                                updatedFilterableColumnIds = columns;
+                            }
+                            const finalColumns = addActionsColumn([{ label: '#', key: 'index' }, ...updatedFilterableColumnIds], this.actionOptions);
+                            // const finalColumns: ColumnDefinition[] = addActionsColumn(
+                            //   [{ label: '#', key: 'index' }, ...columns],
+                            //   this.actionOptions
+                            // );
+                            const pagerResponse = response.pagination;
+                            setColumns(finalColumns);
+                            setData(data);
+                            setPager(new Pager(pagerResponse || {}));
+                            setOrgUnitLabel(orgUnitLabel);
+                        }
+                        catch (error) {
+                            console.error('Failed to fetch tracker data:', error);
+                            setError('Could not load records. Please reload.');
+                        }
+                        finally {
+                            setLoading(false);
+                        }
+                    };
+                    fetchTrackerData();
                 }
             }, [
                 metaData,
@@ -4198,7 +4443,6 @@ class LineListTableComponent extends ReactWrapperModule {
                         : cell;
                 }));
                 const worksheetData = [header, ...rows];
-                // Creates worksheet and workbook, then writes to file
                 const worksheet = XLSX.utils.aoa_to_sheet(worksheetData);
                 const workbook = XLSX.utils.book_new();
                 XLSX.utils.book_append_sheet(workbook, worksheet, 'LineListData');
@@ -4220,7 +4464,6 @@ class LineListTableComponent extends ReactWrapperModule {
                 const header = filteredColumns.map((col) => `"${col.label}"`).join(',');
                 const csvData = data.map((row) => filteredColumns.map((col) => `"${safeValue(row[col.key])}"`).join(','));
                 const csvContent = [header, ...csvData].join('\n');
-                // Creates a Blob and triggers the download
                 const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
                 const url = URL.createObjectURL(blob);
                 const link = document.createElement('a');
@@ -4230,7 +4473,7 @@ class LineListTableComponent extends ReactWrapperModule {
                 link.click();
                 document.body.removeChild(link);
             };
-            const handleInputChange = (key, value) => {
+            const handleInputChange = (key, value, type) => {
                 setInputValues((prevValues) => ({
                     ...prevValues,
                     [key]: value ?? '',
@@ -4239,20 +4482,36 @@ class LineListTableComponent extends ReactWrapperModule {
                     // Removes old filter for this key
                     const filteredFilters = prevFilters.filter((f) => f.attribute !== key);
                     // adds new filter only if value is not empty
-                    const updatedFilters = value.trim()
-                        ? [
-                            ...filteredFilters,
-                            new DataQueryFilter()
-                                .setAttribute(key)
-                                .setCondition(DataFilterCondition.Like)
-                                .setValue(value),
-                        ]
-                        : filteredFilters;
+                    let updatedFilters;
+                    if (type === 'dataElement') {
+                        updatedFilters =
+                            value && value.length
+                                ? [
+                                    ...filteredFilters,
+                                    new DataQueryFilter()
+                                        .setAttribute(key)
+                                        .setCondition(DataFilterCondition.Like)
+                                        .setValue(value)
+                                        .setType('DATA_ELEMENT'),
+                                ]
+                                : filteredFilters;
+                    }
+                    else {
+                        updatedFilters = value.trim()
+                            ? [
+                                ...filteredFilters,
+                                new DataQueryFilter()
+                                    .setAttribute(key)
+                                    .setCondition(DataFilterCondition.Like)
+                                    .setValue(value),
+                            ]
+                            : filteredFilters;
+                    }
                     return updatedFilters;
                 });
             };
             //TODO: MERGE THIS WITH HANDLE INPUT CHANGE PUT A CHECK FOR IF ITS A SELECT FIELD TO USE EQ
-            const handleInputChangeForSelectField = (key, value) => {
+            const handleInputChangeForSelectField = (key, value, type) => {
                 setInputValues((prevValues) => ({
                     ...prevValues,
                     [key]: value ?? '',
@@ -4261,19 +4520,35 @@ class LineListTableComponent extends ReactWrapperModule {
                     // Removes existing filter for the same key (attribute)
                     const filteredFilters = prevFilters.filter((f) => f.attribute !== key);
                     // adds new filter only if value is not empty
-                    const updatedFilters = value.trim()
-                        ? [
-                            ...filteredFilters,
-                            new DataQueryFilter()
-                                .setAttribute(key)
-                                .setCondition(DataFilterCondition.Equal)
-                                .setValue(value),
-                        ]
-                        : filteredFilters;
+                    let updatedFilters;
+                    if (type === 'dataElement') {
+                        updatedFilters =
+                            value && value.length
+                                ? [
+                                    ...filteredFilters,
+                                    new DataQueryFilter()
+                                        .setAttribute(key)
+                                        .setCondition(DataFilterCondition.Equal)
+                                        .setValue(value)
+                                        .setType('DATA_ELEMENT'),
+                                ]
+                                : filteredFilters;
+                    }
+                    else {
+                        updatedFilters = value.trim()
+                            ? [
+                                ...filteredFilters,
+                                new DataQueryFilter()
+                                    .setAttribute(key)
+                                    .setCondition(DataFilterCondition.Equal)
+                                    .setValue(value),
+                            ]
+                            : filteredFilters;
+                    }
                     return updatedFilters;
                 });
             };
-            const handleDateSelect = (key, selectedDate) => {
+            const handleDateSelect = (key, selectedDate, type) => {
                 const selectedDateString = selectedDate?.calendarDateString ?? '';
                 // Updates dateStates
                 setDateStates((prevDateStates) => ({
@@ -4283,30 +4558,51 @@ class LineListTableComponent extends ReactWrapperModule {
                 // Updates dataQueryFilters
                 setTempDataQueryFiltersState((prevFilters) => {
                     const filteredFilters = (prevFilters || []).filter((f) => f.attribute !== key);
-                    const updatedFilters = selectedDateString.trim()
-                        ? [
-                            ...filteredFilters,
-                            new DataQueryFilter()
-                                .setAttribute(key)
-                                .setCondition(DataFilterCondition.Equal)
-                                .setValue(selectedDateString),
-                        ]
-                        : filteredFilters;
+                    // const updatedFilters = selectedDateString.trim()
+                    //   ? [
+                    //       ...filteredFilters,
+                    //       new DataQueryFilter()
+                    //         .setAttribute(key)
+                    //         .setCondition(DataFilterCondition.Equal)
+                    //         .setValue(selectedDateString),
+                    //     ]
+                    //   : filteredFilters;
+                    let updatedFilters;
+                    if (type === 'dataElement') {
+                        updatedFilters = selectedDateString.trim()
+                            ? [
+                                ...filteredFilters,
+                                new DataQueryFilter()
+                                    .setAttribute(key)
+                                    .setCondition(DataFilterCondition.Equal)
+                                    .setValue(selectedDateString)
+                                    .setType('DATA_ELEMENT'),
+                            ]
+                            : filteredFilters;
+                    }
+                    else {
+                        updatedFilters = selectedDateString.trim()
+                            ? [
+                                ...filteredFilters,
+                                new DataQueryFilter()
+                                    .setAttribute(key)
+                                    .setCondition(DataFilterCondition.Equal)
+                                    .setValue(selectedDateString),
+                            ]
+                            : filteredFilters;
+                    }
                     return updatedFilters;
                 });
             };
-            const handleSearch = () => (setDataQueryFiltersState(tempDataQueryFiltersState),
-                setStartDateState(tempStartDateState),
-                setEndDateState(tempEndDateState),
-                setOrgUnitState(tempOrgUnitState));
+            const handleAdditionalFilters = () => setDataQueryFiltersState(tempDataQueryFiltersState);
+            const handleStartDateFilter = () => setStartDateState(tempStartDateState);
+            const handleEndDateFilter = () => setEndDateState(tempEndDateState);
+            const handleOrgUnitFilter = () => setOrgUnitState(tempOrgUnitState);
             function getTextColorFromBackGround(hex) {
-                // Removes the hash if present
                 hex = hex.replace('#', '');
-                // Converts to RGB
                 const r = parseInt(hex.substr(0, 2), 16);
                 const g = parseInt(hex.substr(2, 2), 16);
                 const b = parseInt(hex.substr(4, 2), 16);
-                // YIQ formula to calculate brightness
                 const yiq = (r * 299 + g * 587 + b * 114) / 1000;
                 // Returns black for light backgrounds, white for dark backgrounds
                 return yiq >= 128 ? colors$1.grey700 : '#FFFFFF';
@@ -4331,8 +4627,8 @@ class LineListTableComponent extends ReactWrapperModule {
                             React__default.createElement(MenuItem$1, { label: "Download Csv", onClick: handleCsvDownload }),
                             React__default.createElement(MenuItem$1, { label: "Download Excel", onClick: handleExcelDownload })), value: "Download" }, "Download"))),
                 orgUnitModalVisible && (React__default.createElement(OrgUnitSelector, { hide: hide, setHide: setHide, selectedOrgUnit: selectedOrgUnit, setSelectedOrgUnit: setSelectedOrgUnit, setOrgUnitState: setOrgUnitState, setTempOrgUnitState: setTempOrgUnitState, tempOrgUnitState: tempOrgUnitState })),
-                this.showFilters && (React__default.createElement(FilterToolbar, { orgUnitLabel: orgUnitLabel, selectedOrgUnit: selectedOrgUnit, setSelectedOrgUnit: setSelectedOrgUnit, setOrgUnitState: setOrgUnitState, defaultOrgUnit: defaultOrgUnit, setHide: setHide, startDateState: startDateState, setStartDateState: setStartDateState, endDateState: endDateState, setEndDateState: setEndDateState, visibleFilters: visibleFilters, dateStates: dateStates, inputValues: inputValues, setInputValues: setInputValues, handleInputChange: handleInputChange, handleInputChangeForSelectField: handleInputChangeForSelectField, handleDateSelect: handleDateSelect, prevValue: prevValue, setPrevValue: setPrevValue, showAllFilters: showAllFilters, setShowAllFilters: setShowAllFilters, handleSearch: handleSearch, setTempStartDateState: setTempStartDateState, setTempEndDateState: setTempEndDateState, setTempOrgUnitState: setTempOrgUnitState, tempStartDateState: tempStartDateState, tempEndDateState: tempEndDateState, tempOrgUnitState: tempOrgUnitState, dataQueryFiltersState: dataQueryFiltersState, setDataQueryFiltersState: setDataQueryFiltersState, SetOrgUnitModalVisible: setOrgUnitModalVisible, showEnrollmentDates: this.showEnrollmentDates })),
-                React__default.createElement(LineListTable, { columns: columns, data: data, pager: pager, setPager: setPager, getTextColorFromBackGround: getTextColorFromBackGround, actionOptions: this.actionOptions, actionOptionOrientation: this.actionOptionOrientation, actionSelected: this.actionSelected, selectable: selectable, rowsSelected: this.rowsSelected, showActionButtons: showActionButtons })))));
+                this.showFilters && (React__default.createElement(FilterToolbar, { orgUnitLabel: orgUnitLabel, selectedOrgUnit: selectedOrgUnit, setSelectedOrgUnit: setSelectedOrgUnit, setOrgUnitState: setOrgUnitState, defaultOrgUnit: defaultOrgUnit, setHide: setHide, startDateState: startDateState, setStartDateState: setStartDateState, endDateState: endDateState, setEndDateState: setEndDateState, visibleFilters: visibleFilters, dateStates: dateStates, inputValues: inputValues, setInputValues: setInputValues, handleInputChange: handleInputChange, handleInputChangeForSelectField: handleInputChangeForSelectField, handleDateSelect: handleDateSelect, showAllFilters: showAllFilters, setShowAllFilters: setShowAllFilters, setTempStartDateState: setTempStartDateState, setTempEndDateState: setTempEndDateState, setTempOrgUnitState: setTempOrgUnitState, tempStartDateState: tempStartDateState, tempEndDateState: tempEndDateState, tempOrgUnitState: tempOrgUnitState, dataQueryFiltersState: dataQueryFiltersState, setDataQueryFiltersState: setDataQueryFiltersState, SetOrgUnitModalVisible: setOrgUnitModalVisible, showEnrollmentDates: this.showEnrollmentDates, handleAdditionalFilters: handleAdditionalFilters, handleStartDateFilter: handleStartDateFilter, handleEndDateFilter: handleEndDateFilter, handleOrgUnitFilter: handleOrgUnitFilter, setDateStates: setDateStates, prevInputValues: prevInputValues, setPrevInputValues: setPrevInputValues, setTempDataQueryFiltersState: setTempDataQueryFiltersState, prevDateStates: prevDateStates, setPrevDateStates: setPrevDateStates, prevSelectedOrgUnit: prevSelectedOrgUnit, setPrevSelectedOrgUnit: setPrevSelectedOrgUnit })),
+                React__default.createElement(LineListTable, { columns: columns, data: data, pager: pager, setPager: setPager, getTextColorFromBackGround: getTextColorFromBackGround, actionOptions: this.actionOptions, actionOptionOrientation: this.actionOptionOrientation, actionSelected: this.actionSelected, selectable: selectable, rowsSelected: this.rowsSelected, showActionButtons: showActionButtons, error: error })))));
         };
     }
     ngOnChanges(changes) {
@@ -4381,7 +4677,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: "ng-dhis2-ui-line-list", inputs: { triggerToken: "triggerToken", programId: "programId", orgUnit: "orgUnit", programStageId: "programStageId", actionOptions: "actionOptions", actionOptionOrientation: "actionOptionOrientation", attributeFilters: "attributeFilters", useOuModeWithOlderDHIS2Instance: "useOuModeWithOlderDHIS2Instance", startDate: "startDate", endDate: "endDate", dataQueryFilters: "dataQueryFilters", ouMode: "ouMode", isButtonLoading: "isButtonLoading", buttonFilter: "buttonFilter", filterRootOrgUnit: "filterRootOrgUnit", showFilters: "showFilters", isOptionSetNameVisible: "isOptionSetNameVisible", allowRowsSelection: "allowRowsSelection", enrollmentStatus: "enrollmentStatus", filterableColumnIds: "filterableColumnIds", triggerRefetch: "triggerRefetch", eventStatus: "eventStatus", showActionButtons: "showActionButtons", showEnrollmentDates: "showEnrollmentDates", showDownloadButton: "showDownloadButton" }, outputs: { actionSelected: "actionSelected", rowsSelected: "rowsSelected" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@charset \"UTF-8\";::ng-deep .custom-input{display:flex!important;gap:4px!important;align-items:center!important;border:1px solid #9fadba!important;border-radius:4px!important;margin:0;padding:0 0 0 8px;background-color:#fff!important}::ng-deep .custom-input div{margin:0!important}::ng-deep .custom-input label{font-size:12px;padding-right:0}::ng-deep .custom-input input{border:none!important;font-size:12px!important;display:flex;align-items:center;padding-left:4px;height:40px;outline:none!important;box-shadow:none!important}::ng-deep .custom-input input:focus{border:none!important;box-shadow:none!important}::ng-deep .custom-input [data-test=calendar-clear-button]{background-color:#f2f2f2!important;color:#870808!important;border-radius:6px!important;padding:4px 10px!important;font-size:0!important}::ng-deep .custom-input [data-test=calendar-clear-button]:before{content:\"\\2715\";font-size:14px;color:#870808}::ng-deep .custom-input [data-test=calendar-clear-button]:hover{background-color:#ddd}::ng-deep .calendar-input-wrapper{position:relative}::ng-deep .calendar-input-wrapper .custom-input{position:relative;width:100%;display:flex;align-items:center}::ng-deep .calendar-input-wrapper [data-test=calendar-clear-button]{right:8px;bottom:14px;margin:auto;display:flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:0!important;background-color:#a0adba!important;border-radius:50%;padding:2px;cursor:pointer}::ng-deep .calendar-input-wrapper [data-test=calendar-clear-button]:before{content:\"\\2715\";font-size:10px;color:#f0f0f0}::ng-deep .calendar-input-wrapper input{padding-right:40px!important;height:40px;line-height:40px;box-sizing:border-box}::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}::ng-deep .custom-select-input{display:flex!important;gap:4px!important;align-items:center!important;border:1px solid #9fadba!important;border-radius:4px!important;margin:0;padding:0 0 0 8px;background-color:#fff!important}::ng-deep .custom-select-input div{margin:0!important}::ng-deep .custom-select-input [data-test=dhis2-uiwidgets-singleselectfield-label]{font-size:12px;color:gray!important}::ng-deep .custom-select-input [data-test=dhis2-uicore-select-input]{border:none!important;font-size:12px!important;display:flex;align-items:center;padding-left:4px;height:40px;outline:none!important;box-shadow:none!important}::ng-deep .custom-select-input [data-test=dhis2-uicore-select-input]:focus-within{box-shadow:none!important}::ng-deep .custom-select-input input:focus{border:none!important;box-shadow:none!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: { triggerToken: "triggerToken", programId: "programId", orgUnit: "orgUnit", programStageId: "programStageId", actionOptions: "actionOptions", actionOptionOrientation: "actionOptionOrientation", attributeFilters: "attributeFilters", useOuModeWithOlderDHIS2Instance: "useOuModeWithOlderDHIS2Instance", startDate: "startDate", endDate: "endDate", dataQueryFilters: "dataQueryFilters", ouMode: "ouMode", isButtonLoading: "isButtonLoading", buttonFilter: "buttonFilter", filterRootOrgUnit: "filterRootOrgUnit", showFilters: "showFilters", isOptionSetNameVisible: "isOptionSetNameVisible", allowRowsSelection: "allowRowsSelection", enrollmentStatus: "enrollmentStatus", filterableColumnIds: "filterableColumnIds", triggerRefetch: "triggerRefetch", eventStatus: "eventStatus", showActionButtons: "showActionButtons", showEnrollmentDates: "showEnrollmentDates", showDownloadButton: "showDownloadButton", searcheableDataElements: "searcheableDataElements" }, outputs: { actionSelected: "actionSelected", rowsSelected: "rowsSelected" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@charset \"UTF-8\";::ng-deep .custom-input{display:flex!important;gap:4px!important;align-items:center!important;border:1px solid #9fadba!important;border-radius:4px!important;margin:0;padding:0 0 0 8px;background-color:#fff!important}::ng-deep .custom-input div{margin:0!important}::ng-deep .custom-input label{font-size:12px;padding-right:0}::ng-deep .custom-input input{border:none!important;font-size:12px!important;display:flex;align-items:center;padding-left:4px;height:40px;outline:none!important;box-shadow:none!important}::ng-deep .custom-input input:focus{border:none!important;box-shadow:none!important}::ng-deep .custom-input [data-test=calendar-clear-button]{background-color:#f2f2f2!important;color:#870808!important;border-radius:6px!important;padding:4px 10px!important;font-size:0!important}::ng-deep .custom-input [data-test=calendar-clear-button]:before{content:\"\\2715\";font-size:14px;color:#870808}::ng-deep .custom-input [data-test=calendar-clear-button]:hover{background-color:#ddd}::ng-deep .calendar-input-wrapper{position:relative}::ng-deep .calendar-input-wrapper .custom-input{position:relative;width:100%;display:flex;align-items:center}::ng-deep .calendar-input-wrapper [data-test=calendar-clear-button]{right:8px;bottom:14px;margin:auto;display:flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:0!important;background-color:#a0adba!important;border-radius:50%;padding:2px;cursor:pointer}::ng-deep .calendar-input-wrapper [data-test=calendar-clear-button]:before{content:\"\\2715\";font-size:10px;color:#f0f0f0}::ng-deep .calendar-input-wrapper input{padding-right:40px!important;height:40px;line-height:40px;box-sizing:border-box}::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}::ng-deep .custom-select-input{display:flex!important;gap:4px!important;align-items:center!important;border:1px solid #9fadba!important;border-radius:4px!important;margin:0;padding:0 0 0 8px;background-color:#fff!important}::ng-deep .custom-select-input div{margin:0!important}::ng-deep .custom-select-input [data-test=dhis2-uiwidgets-singleselectfield-label]{font-size:12px;color:gray!important}::ng-deep .custom-select-input [data-test=dhis2-uicore-select-input]{border:none!important;font-size:12px!important;display:flex;align-items:center;padding-left:4px;height:40px;outline:none!important;box-shadow:none!important}::ng-deep .custom-select-input [data-test=dhis2-uicore-select-input]:focus-within{box-shadow:none!important}::ng-deep .custom-select-input input:focus{border:none!important;box-shadow:none!important}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListTableComponent, decorators: [{
             type: Component,
@@ -4440,6 +4736,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
                 type: Input
             }], showDownloadButton: [{
                 type: Input
+            }], searcheableDataElements: [{
+                type: Input
             }] } });
 
 class LineListModule {
@@ -6202,7 +6500,11 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                 setTouched(true);
             };
             const checkValueUniqueness = async () => {
-                if (this.field().unique || (this.field().extension?.isDataElementUnique ?? false) && value && value.length > 0 && touched) {
+                if (this.field().unique ||
+                    ((this.field().extension?.isDataElementUnique ?? false) &&
+                        value &&
+                        value.length > 0 &&
+                        touched)) {
                     //  if (this.field().unique && value && value.length > 0 && touched) {
                     setCheckingUniqueness(true);
                     setRecordExistError(undefined);
@@ -6266,6 +6568,13 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                             }, onBlur: () => {
                                 checkValueUniqueness();
                             }, selected: arrayValue }, (this.field().options || []).map((option) => (React__default.createElement(MultiSelectOption, { key: option.key, label: option.label, value: option.value })))));
+                    case 'date':
+                    case 'date-time':
+                        return (React__default.createElement(InputField$1, { error: hasError, validationText: validationError, type: this.field().type, inputWidth: 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) => {
+                                onValueChange(event.value);
+                            }, onBlur: () => {
+                                checkValueUniqueness();
+                            } }));
                     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) => {