@iapps/ng-dhis2-ui 1.1.29 → 1.1.39

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, 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, 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, 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 cx from 'classnames';
@@ -2043,7 +2043,7 @@ const FixedPeriodFilter = ({ allowedPeriodTypes, excludedPeriodTypes, currentPer
         React__default.createElement("div", { className: "leftSection" },
             React__default.createElement(SingleSelectField, { label: i18n.t('Period type'), onChange: ({ selected }) => onSelectPeriodType(selected), dense: true, selected: currentPeriodType, disabled: onlyAllowedTypeIsSelected, className: "filterElement", dataTest: `${dataTest}-period-type` }, (allowedPeriodTypes
                 ? getFixedPeriodsOptions().filter((option) => allowedPeriodTypes.some((type) => type === option.id))
-                : filterPeriodTypesById(getFixedPeriodsOptions(), excludedPeriodTypes)).map((option) => (React__default.createElement(SingleSelectOption, { key: option.id, value: option.id, label: option.name, dataTest: `${dataTest}-period-type-option-${option.id}` }))))),
+                : filterPeriodTypesById(getFixedPeriodsOptions(), excludedPeriodTypes)).map((option) => (React__default.createElement(SingleSelectOption, { key: crypto.randomUUID() || option.id, value: option.id, label: option.name, dataTest: `${dataTest}-period-type-option-${option.id}` }))))),
         React__default.createElement("div", { className: "rightSection" },
             React__default.createElement(InputField$1, { label: i18n.t('Year'), className: "filterElement", type: "number", placeholder: i18n.t('Select year'), value: currentYear, onChange: ({ value }) => onSelectYear(value), dense: true, dataTest: `${dataTest}-year` })),
         React__default.createElement("style", { jsx: true }, `
@@ -2074,7 +2074,7 @@ FixedPeriodFilter.propTypes = {
 };
 
 const RelativePeriodFilter = ({ currentFilter, onSelectFilter, dataTest, excludedPeriodTypes, }) => (React__default.createElement("div", { className: "leftSection" },
-    React__default.createElement(SingleSelectField, { label: i18n.t('Period type'), onChange: ({ selected }) => onSelectFilter(selected), dense: true, selected: currentFilter, className: "filterElement", dataTest: dataTest }, filterPeriodTypesById(getRelativePeriodsOptions(), excludedPeriodTypes).map((option) => (React__default.createElement(SingleSelectOption, { key: option.id, value: option.id, label: option.name, dataTest: `${dataTest}-option-${option.id}` })))),
+    React__default.createElement(SingleSelectField, { label: i18n.t('Period type'), onChange: ({ selected }) => onSelectFilter(selected), dense: true, selected: currentFilter, className: "filterElement", dataTest: dataTest }, filterPeriodTypesById(getRelativePeriodsOptions(), excludedPeriodTypes).map((option) => (React__default.createElement(SingleSelectOption, { key: crypto.randomUUID() || option.id, value: option.id, label: option.name, dataTest: `${dataTest}-option-${option.id}` })))),
     React__default.createElement("style", { jsx: true }, `
       .leftSection {
         flex-grow: 1;
@@ -3217,13 +3217,20 @@ const getTrackedEntityData = (response, programId, pager, filters) => {
     let teis = response.data
         .trackedEntityInstances;
     let programMetaData = response.metadata.programTrackedEntityAttributes;
+    //let progrmaMetaDataAttributesMap = programMetaData.reduce
+    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('metadata', programAttributesMap);
+    console.log('metadat attributes', programMetaData);
     if (filters) {
         teis = getFilteredTrackedEntityInstances(teis, filters);
     }
@@ -3258,6 +3265,18 @@ 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));
     });
+    const searchableAttributes = mappedProgramMetadataAttributes
+        .filter((attr) => attr.searchable && attr.displayInList)
+        .map((attr) => ({
+        //  label: attr.trackedEntityAttribute.displayName,
+        key: attr.id,
+    }));
+    // Extract keys from searchableAttributes for quick lookup
+    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,
@@ -3271,7 +3290,8 @@ const getTrackedEntityData = (response, programId, pager, filters) => {
         attributesToUse.forEach((attr) => (row[attr.attribute] = attr.value));
         return row;
     });
-    return { columns: entityColumns, data: attributesData };
+    console.log('attributes to use', entityColumns);
+    return { columns: entityColumns, data: attributesData, filteredEntityColumns: filteredEntityColumns };
 };
 const getEventData = (response, pager) => {
     const events = response.data.events;
@@ -3307,7 +3327,8 @@ const addActionsColumn = (columns, actionOptions) => {
 class LineListTableComponent extends ReactWrapperModule {
     constructor() {
         super(...arguments);
-        this.showApprovalButton = false;
+        this.dispatchTeis = false;
+        this.showFilterButton = false;
         this.actionSelected = new EventEmitter();
         this.reactStateUpdaters = null;
         this.approvalSelected = new EventEmitter();
@@ -3335,6 +3356,9 @@ class LineListTableComponent extends ReactWrapperModule {
             const [endDateState, setEndDateState] = useState(this.endDate);
             const [loading, setLoading] = useState(false);
             const [isButtonLoading, setIsButtonLoading] = useState(this.isButtonLoading);
+            const [filteredColumns, setFilteredColumns] = useState();
+            const [inputValues, setInputValues] = useState({});
+            const [filters, setFilters] = useState(false);
             // Store updaters in refs for Angular to access
             const updateRefs = useRef({
                 setProgramIdState,
@@ -3364,11 +3388,14 @@ class LineListTableComponent extends ReactWrapperModule {
             useEffect(() => {
                 setLoading(true);
                 this.lineListService
-                    .getLineListData(this.programId, this.orgUnit, this.programStageId, pager.page, pager.pageSize, this.attributeFilters, this.startDate, this.endDate, this.ouMode)
+                    .getLineListData(this.programId, this.orgUnit, this.programStageId, pager.page, pager.pageSize, attributeFiltersState, 
+                // this.attributeFilters,
+                this.startDate, this.endDate, this.ouMode)
                     .subscribe((response) => {
                     let entityColumns = [];
                     let responsePager;
                     let entityData = [];
+                    let filteredDataColumns = [];
                     if (this.programStageId) {
                         responsePager = response.data.pager;
                         const { columns, data } = getProgramStageData(response, this.programStageId, pager);
@@ -3378,9 +3405,14 @@ class LineListTableComponent extends ReactWrapperModule {
                     else if ('trackedEntityInstances' in response.data) {
                         responsePager = response.data
                             .pager;
-                        const { columns, data } = getTrackedEntityData(response, this.programId, pager, this.filters);
+                        const { columns, data, filteredEntityColumns } = getTrackedEntityData(response, this.programId, pager, this.filters);
                         entityColumns = columns;
                         entityData = data;
+                        //  setFilteredColumns(filteredEntityColumns);
+                        // Ensure filter inputs do not disappear when no data is returned
+                        // If filteredEntityColumns is empty, keep the previous columns instead of clearing them
+                        setFilteredColumns((prev) => filteredEntityColumns.length > 0 ? filteredEntityColumns : prev);
+                        filteredDataColumns = filteredEntityColumns;
                     }
                     else {
                         responsePager = response.data.pager;
@@ -3390,12 +3422,12 @@ class LineListTableComponent extends ReactWrapperModule {
                     }
                     const finalColumns = addActionsColumn([{ label: '#', key: 'index' }, ...entityColumns], this.actionOptions);
                     setLoading(false);
-                    console.log('hey');
+                    // console.log('hey');
                     setColumns(...[finalColumns]);
                     setData(...[entityData]);
                     setPager(...[responsePager]);
-                    console.log('columns', columns);
-                    console.log('data', data);
+                    // console.log('columns', columns);
+                    // console.log('data', data);
                 });
             }, [
                 programIdState,
@@ -3437,17 +3469,64 @@ class LineListTableComponent extends ReactWrapperModule {
                                 : null;
                         })
                             .filter((item) => item !== null); // Remove null entries (no matching enrollment)
-                        console.log('TEI and Enrollment IDs emitted:', teiEnrollmentList);
+                        // console.log('TEI and Enrollment IDs emitted:', teiEnrollmentList);
                         this.approvalSelected.emit(teiEnrollmentList);
                     }
                     else {
-                        console.log('No tracked entity instances found in the response');
+                        // console.log('No tracked entity instances found in the response');
                         this.approvalSelected.emit([]); // Emit empty array if no TEIs
                     }
                 });
             };
+            // const handleInputChange = (key: string, value: string) => {
+            //   setInputValues((prevValues) => ({
+            //     ...prevValues,
+            //     [key]: value ?? '', // Ensure no undefined values
+            //   }));
+            // };
+            // if (!filteredColumns || filteredColumns.length === 0) {
+            //   return <div>No fields available</div>;
+            // }
+            const handleInputChange = (key, value) => {
+                setInputValues((prevValues) => ({
+                    ...prevValues,
+                    [key]: value ?? '',
+                }));
+                setAttributeFiltersState((prevFilters = []) => {
+                    // Remove old filter for this key
+                    const filteredFilters = prevFilters.filter((f) => f.attribute !== key);
+                    // Only add new filter if value is not empty
+                    const updatedFilters = value.trim()
+                        ? [...filteredFilters, { attribute: key, operator: 'like', value }]
+                        : filteredFilters;
+                    // console.log(`Updated Filters:`, updatedFilters); // Debugging
+                    return updatedFilters;
+                });
+                // setAttributeFiltersState((prevFilters = []) => {
+                //   // Check if attribute already exists
+                //   const existingFilterIndex = prevFilters.findIndex(
+                //     (f) => f.attribute === key
+                //   );
+                //   // Create a new filter object
+                //   const newFilter = { attribute: key, operator: 'like', value };
+                //   if (existingFilterIndex !== -1) {
+                //     // If attribute exists, update its value
+                //     const updatedFilters = [...prevFilters];
+                //     updatedFilters[existingFilterIndex] = newFilter;
+                //     console.log(`Updated Filters:`, updatedFilters); // Log updated filter list
+                //     return updatedFilters;
+                //   } else {
+                //     // If attribute doesn't exist, add a new object
+                //     return [...prevFilters, newFilter];
+                //   }
+                // });
+            };
+            // console.log(
+            //   'these are the filtered columns which have the attributes neede',
+            //   filteredColumns
+            // );
             return (React__default.createElement("div", null,
-                this.showApprovalButton && (React__default.createElement("div", { style: {
+                React__default.createElement("div", { style: {
                         width: '100%',
                         display: 'flex',
                         justifyContent: 'flex-end',
@@ -3455,7 +3534,45 @@ class LineListTableComponent extends ReactWrapperModule {
                         gap: 8,
                         padding: 8,
                         marginBottom: 16,
-                    } }, isButtonLoading ? (React__default.createElement(CircularLoader$1, { small: true })) : (React__default.createElement(Button$1, { className: "bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600", onClick: handleApprovalClick, primary: true }, this.buttonLabel)))),
+                    } },
+                    this.dispatchTeis &&
+                        (isButtonLoading ? (React__default.createElement(CircularLoader$1, { small: true })) : (React__default.createElement(Button$1, { style: {
+                                backgroundColor: '#3b82f6', // Blue color
+                                color: 'white',
+                                padding: '8px 16px',
+                                borderRadius: '4px',
+                                cursor: 'pointer',
+                            }, onClick: handleApprovalClick, primary: true }, this.buttonLabel))),
+                    this.showFilterButton && (React__default.createElement(Button$1, { style: {
+                            backgroundColor: '#6b7280', // Gray color
+                            color: 'white',
+                            padding: '8px 16px',
+                            borderRadius: '4px',
+                            cursor: 'pointer',
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 8,
+                        }, onClick: () => {
+                            setFilters(!filters);
+                        } },
+                        React__default.createElement(IconFilter16, null),
+                        filters ? 'Hide Filters' : 'Show Filters'))),
+                filters && (React__default.createElement("div", { style: {
+                        display: 'flex',
+                        gap: '10px',
+                        flexWrap: 'wrap',
+                        paddingBottom: '16px',
+                    } }, (filteredColumns ?? []).map(({ label, key }) => (React__default.createElement(InputField$1, { key: key, label: label, value: inputValues[key] || '', onChange: (e) => {
+                        console.log(`Event for key "${key}":`, e);
+                        // Check if it's a standard event with target.value
+                        if ('target' in e && e.target) {
+                            handleInputChange(key, e.target.value);
+                        }
+                        // Check if it's an event with direct value
+                        else if ('value' in e) {
+                            handleInputChange(key, e.value ?? '');
+                        }
+                    } }))))),
                 loading ? (React__default.createElement("div", { style: {
                         display: 'flex',
                         alignItems: 'center',
@@ -3468,7 +3585,14 @@ class LineListTableComponent extends ReactWrapperModule {
                         } }, "Loading"))) : (React__default.createElement(DataTable, null,
                     React__default.createElement(TableHead, null,
                         React__default.createElement(DataTableRow, null, columns.map((col) => (React__default.createElement(DataTableColumnHeader, { key: col.key }, col.label))))),
-                    React__default.createElement(TableBody, null, data.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])))))))),
+                    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: {
+                                textAlign: 'center',
+                                fontWeight: 'bold',
+                                color: 'grey',
+                                padding: '20px',
+                            } }, "No data found")))),
                     React__default.createElement(TableFoot, null,
                         React__default.createElement(DataTableRow, null,
                             React__default.createElement(DataTableCell, { colSpan: columns.length.toString() },
@@ -3516,7 +3640,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", showApprovalButton: "showApprovalButton", isButtonLoading: "isButtonLoading", buttonLabel: "buttonLabel" }, outputs: { actionSelected: "actionSelected", approvalSelected: "approvalSelected" }, 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" }, outputs: { actionSelected: "actionSelected", approvalSelected: "approvalSelected" }, 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,
@@ -3539,7 +3663,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
                 type: Input
             }], ouMode: [{
                 type: Input
-            }], showApprovalButton: [{
+            }], dispatchTeis: [{
+                type: Input
+            }], showFilterButton: [{
                 type: Input
             }], actionSelected: [{
                 type: Output
@@ -4817,7 +4943,7 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                             });
                             setValue(event.selected);
                             setTouched(true);
-                        } }, (this.field().options || []).map((option) => (React__default.createElement(SingleSelectOption, { key: option.key, label: option.label, value: option.value })))));
+                        } }, (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, label: this.label(), name: this.field().id, required: this.field().required, loadingText: "Loading options", noMatchText: "No options found", onChange: (event) => {
                             const selectedValue = (event.selected || []).join(',');
@@ -5541,6 +5667,8 @@ class SelectionFiltersComponent extends ReactWrapperModule {
             const [touched, setTouched] = useState(false);
             const [showOrgUnit, setShowOrgUnit] = useState(false);
             const [value, setValue] = useState(null);
+            const [showMoreFilters, setShowMoreFilters] = useState(false);
+            const toggleMoreFilters = () => setShowMoreFilters((prev) => !prev);
             useEffect(() => {
                 setFilters({
                     programAttributesFilters: this.programAttributesFilters,
@@ -5582,7 +5710,9 @@ class SelectionFiltersComponent extends ReactWrapperModule {
             const handleSearch = () => {
                 this.actionSelected.emit({
                     ...filters,
-                    organisationUnit: selectedOrganisationUnit || this.organisationUnit || filters.organisationUnit,
+                    organisationUnit: selectedOrganisationUnit ||
+                        this.organisationUnit ||
+                        filters.organisationUnit,
                     startDate: filters.startDate,
                     endDate: filters.endDate,
                     program: this.program || filters.program,
@@ -5657,17 +5787,14 @@ class SelectionFiltersComponent extends ReactWrapperModule {
                 } },
                 React__default.createElement("div", { style: {
                         display: 'grid',
-                        gridTemplateColumns: 'repeat(3, 1fr)',
+                        gridTemplateColumns: '1fr 1fr 1fr auto', // Ensure proper button sizing
                         gap: '16px',
+                        alignItems: 'center', // Align inputs and button on the same row
                         marginBottom: '16px',
                     } },
-                    React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement(InputField$1, { value: displayValue, label: "Organization Unit", readOnly: false, onFocus: () => {
-                                setShowOrgUnit(true);
-                            }, onBlur: () => {
-                                this.ngZone.run(() => {
-                                    console.log('THIS IS IT::: ');
-                                });
+                    React__default.createElement("div", { style: { width: '100%' } },
+                        React__default.createElement(InputField$1, { value: displayValue, label: "Organization Unit", readOnly: false, onFocus: () => setShowOrgUnit(true), onBlur: () => {
+                                this.ngZone.run(() => console.log('THIS IS IT::: '));
                                 setTouched(true);
                             } }),
                         showOrgUnit && (React__default.createElement(this.FieldOrgUnitSelector, { onCancelOrgUnit: () => {
@@ -5682,30 +5809,36 @@ class SelectionFiltersComponent extends ReactWrapperModule {
                                     setValue(selectedOrgUnit.id);
                                     setShowOrgUnit(false);
                                     setTouched(true);
-                                    // this.ngZone.run(() => {
-                                    //   setDisplayValue(selectedOrgUnit.name);
-                                    //   setSelected(selectedOrgUnit.id)
-                                    //   setSelectedOrganisationUnit(selectedOrgUnit.id)
-                                    //   setValue(selectedOrgUnit.id);
-                                    //   setShowOrgUnit(false);
-                                    // 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 }) }),
-                    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: '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: 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: 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"))));
+                    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("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            height: '100%',
+                        } },
+                        React__default.createElement("label", { style: {
+                                color: 'transparent', // Hides label text but keeps spacing
+                                fontSize: '14px',
+                                marginBottom: '4px',
+                            } }, "Toggle"),
+                        React__default.createElement(Button$1, { style: { height: '40px' }, onClick: () => setShowMoreFilters(!showMoreFilters) }, showMoreFilters ? 'Hide Filters' : 'More Filters'))),
+                showMoreFilters && (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement("div", { style: {
+                            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) })))))),
+                    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) })))))),
+                    React__default.createElement("div", { style: { textAlign: 'right', marginTop: '16px' } },
+                        React__default.createElement(Button$1, { onClick: handleSearch }, "Search"))))));
         };
     }
     getAppConfig() {