blixify-ui-web 1.2.11 → 1.2.13

package/lib/components/data/dataTemplate/index.js

@@ -145,6 +145,8 @@ var indexedDb_1 = require("./indexedDb");
 var pagination_1 = require("./pagination");
 var referenceModal_1 = require("./referenceModal");
 var settingsModal_1 = require("./settingsModal");
+var flexFilterModel_1 = require("./flexFilterModel");
+var flexFilterModule_1 = require("./flexFilterModule");
 exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41;
     var intialiseDefaultFilterValues = function () {
@@ -251,79 +253,92 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     }), batchUpdateData = _76[0], setBatchUpdateData = _76[1];
     var _77 = (0, react_1.useState)((props === null || props === void 0 ? void 0 : props.model) || []), structure = _77[0], setStructure = _77[1];
     var _78 = (0, react_1.useState)(((_e = props === null || props === void 0 ? void 0 : props.organise) === null || _e === void 0 ? void 0 : _e.additionalQuery) || []), additionalQuery = _78[0], setAdditionalQuery = _78[1];
+    // INFO: State for user-configurable flex filters (Monday.com-style)
+    // INFO: Initialize with one empty row so users see inputs immediately without clicking "Add Filter"
+    var _79 = (0, react_1.useState)([
+        {
+            id: "flex-filter-init-row",
+            columnId: "",
+            operator: "=",
+            value: undefined,
+        },
+    ]), flexFilters = _79[0], setFlexFilters = _79[1];
+    var _80 = (0, react_1.useState)({}), flexFilterReferenceOptions = _80[0], setFlexFilterReferenceOptions = _80[1];
+    var _81 = (0, react_1.useState)({}), flexFilterReferenceSearch = _81[0], setFlexFilterReferenceSearch = _81[1];
+    var _82 = (0, react_1.useState)(false), flexFilterModalOpen = _82[0], setFlexFilterModalOpen = _82[1];
     //INFO : Used by Auth
-    var _79 = (0, react_1.useState)({
+    var _83 = (0, react_1.useState)({
         email: "",
         google: "",
         phone: "",
         disabled: false,
         create: false,
-    }), authMethods = _79[0], setAuthMethods = _79[1];
-    var _80 = (0, react_1.useState)(""), selectedAuthMethod = _80[0], setSelectedAuthMethod = _80[1];
+    }), authMethods = _83[0], setAuthMethods = _83[1];
+    var _84 = (0, react_1.useState)(""), selectedAuthMethod = _84[0], setSelectedAuthMethod = _84[1];
     // INFO: Used by Activity Log
-    var _81 = (0, react_1.useState)(false), activityModal = _81[0], setActivityModal = _81[1];
-    var _82 = (0, react_1.useState)(""), activityId = _82[0], setActivityId = _82[1];
+    var _85 = (0, react_1.useState)(false), activityModal = _85[0], setActivityModal = _85[1];
+    var _86 = (0, react_1.useState)(""), activityId = _86[0], setActivityId = _86[1];
     //INFO : Used by Export
-    var _83 = (0, react_1.useState)(null), csvFile = _83[0], setCSVFile = _83[1];
-    var _84 = (0, react_1.useState)([]), csvFileData = _84[0], setCSVFileData = _84[1];
-    var _85 = (0, react_1.useState)(0), stepCSVIndex = _85[0], setStepCSVIndex = _85[1];
-    var _86 = (0, react_1.useState)({}), listCSVMapAttribute = _86[0], setListCSVMapAttribute = _86[1];
-    var _87 = (0, react_1.useState)({}), listCSVObjAttribute = _87[0], setListCSVObjAttribute = _87[1];
-    var _88 = (0, react_1.useState)([]), csvAPIAttribute = _88[0], setCSVAPIAttribute = _88[1];
-    var _89 = (0, react_1.useState)(((_f = props.devSettings.currentUser) === null || _f === void 0 ? void 0 : _f.userEmail) || ""), exportCSVEmail = _89[0], setExportCSVEmail = _89[1];
-    var _90 = (0, react_1.useState)(((_h = (_g = props.organise) === null || _g === void 0 ? void 0 : _g.exportSettings) === null || _h === void 0 ? void 0 : _h.defaultExportPDFName) || ""), exportPDFTitle = _90[0], setExportPDFTitle = _90[1];
-    var _91 = (0, react_1.useState)(false), exportPDFLoading = _91[0], setExportPDFLoading = _91[1];
-    var _92 = (0, react_1.useState)(false), exportReadPDFLoading = _92[0], setExportReadPDFLoading = _92[1];
-    var _93 = (0, react_1.useState)((_l = (_k = (_j = props.organise) === null || _j === void 0 ? void 0 : _j.exportSettings) === null || _k === void 0 ? void 0 : _k.sumColumnId) !== null && _l !== void 0 ? _l : []), exportSumAttributeIds = _93[0], setExportSumAttributeIds = _93[1];
-    var _94 = (0, react_1.useState)((_p = (_o = (_m = props.organise) === null || _m === void 0 ? void 0 : _m.exportSettings) === null || _o === void 0 ? void 0 : _o.hideSubItems) !== null && _p !== void 0 ? _p : false), hideSubItems = _94[0], setHideSubItems = _94[1];
-    var _95 = (0, react_1.useState)([]), importTableData = _95[0], setImportTableData = _95[1];
-    var _96 = (0, react_1.useState)([]), queryList = _96[0], setQueryList = _96[1];
-    var _97 = (0, react_1.useState)(undefined), allQueryList = _97[0], setAllQueryList = _97[1];
-    var _98 = (0, react_1.useState)(-1), queryIndex = _98[0], setQueryIndex = _98[1];
-    var _99 = (0, react_1.useState)((_q = props.organise) === null || _q === void 0 ? void 0 : _q.groupBy), groupId = _99[0], setGroupId = _99[1];
-    var _100 = (0, react_1.useState)(""), readTabSection = _100[0], setReadTabSection = _100[1];
-    var _101 = (0, react_1.useState)(false), readFloatingNav = _101[0], setReadFloatingNav = _101[1];
+    var _87 = (0, react_1.useState)(null), csvFile = _87[0], setCSVFile = _87[1];
+    var _88 = (0, react_1.useState)([]), csvFileData = _88[0], setCSVFileData = _88[1];
+    var _89 = (0, react_1.useState)(0), stepCSVIndex = _89[0], setStepCSVIndex = _89[1];
+    var _90 = (0, react_1.useState)({}), listCSVMapAttribute = _90[0], setListCSVMapAttribute = _90[1];
+    var _91 = (0, react_1.useState)({}), listCSVObjAttribute = _91[0], setListCSVObjAttribute = _91[1];
+    var _92 = (0, react_1.useState)([]), csvAPIAttribute = _92[0], setCSVAPIAttribute = _92[1];
+    var _93 = (0, react_1.useState)(((_f = props.devSettings.currentUser) === null || _f === void 0 ? void 0 : _f.userEmail) || ""), exportCSVEmail = _93[0], setExportCSVEmail = _93[1];
+    var _94 = (0, react_1.useState)(((_h = (_g = props.organise) === null || _g === void 0 ? void 0 : _g.exportSettings) === null || _h === void 0 ? void 0 : _h.defaultExportPDFName) || ""), exportPDFTitle = _94[0], setExportPDFTitle = _94[1];
+    var _95 = (0, react_1.useState)(false), exportPDFLoading = _95[0], setExportPDFLoading = _95[1];
+    var _96 = (0, react_1.useState)(false), exportReadPDFLoading = _96[0], setExportReadPDFLoading = _96[1];
+    var _97 = (0, react_1.useState)((_l = (_k = (_j = props.organise) === null || _j === void 0 ? void 0 : _j.exportSettings) === null || _k === void 0 ? void 0 : _k.sumColumnId) !== null && _l !== void 0 ? _l : []), exportSumAttributeIds = _97[0], setExportSumAttributeIds = _97[1];
+    var _98 = (0, react_1.useState)((_p = (_o = (_m = props.organise) === null || _m === void 0 ? void 0 : _m.exportSettings) === null || _o === void 0 ? void 0 : _o.hideSubItems) !== null && _p !== void 0 ? _p : false), hideSubItems = _98[0], setHideSubItems = _98[1];
+    var _99 = (0, react_1.useState)([]), importTableData = _99[0], setImportTableData = _99[1];
+    var _100 = (0, react_1.useState)([]), queryList = _100[0], setQueryList = _100[1];
+    var _101 = (0, react_1.useState)(undefined), allQueryList = _101[0], setAllQueryList = _101[1];
+    var _102 = (0, react_1.useState)(-1), queryIndex = _102[0], setQueryIndex = _102[1];
+    var _103 = (0, react_1.useState)((_q = props.organise) === null || _q === void 0 ? void 0 : _q.groupBy), groupId = _103[0], setGroupId = _103[1];
+    var _104 = (0, react_1.useState)(""), readTabSection = _104[0], setReadTabSection = _104[1];
+    var _105 = (0, react_1.useState)(false), readFloatingNav = _105[0], setReadFloatingNav = _105[1];
     var readTabSectionRefs = (0, react_1.useRef)({});
     //INFO : Used by Read
     //INFO : Used by Update
-    var _102 = (0, react_1.useState)(false), modalVisible = _102[0], setModalVisible = _102[1];
-    var _103 = (0, react_1.useState)(false), deleteModal = _103[0], setDeleteModal = _103[1];
-    var _104 = (0, react_1.useState)(false), excelModal = _104[0], setExcelModal = _104[1];
-    var _105 = (0, react_1.useState)(false), exportExcel = _105[0], setExportExcel = _105[1];
-    var _106 = (0, react_1.useState)(""), exportType = _106[0], setExportType = _106[1];
-    var _107 = (0, react_1.useState)(false), exportQR = _107[0], setExportQR = _107[1];
-    var _108 = (0, react_1.useState)(function () {
+    var _106 = (0, react_1.useState)(false), modalVisible = _106[0], setModalVisible = _106[1];
+    var _107 = (0, react_1.useState)(false), deleteModal = _107[0], setDeleteModal = _107[1];
+    var _108 = (0, react_1.useState)(false), excelModal = _108[0], setExcelModal = _108[1];
+    var _109 = (0, react_1.useState)(false), exportExcel = _109[0], setExportExcel = _109[1];
+    var _110 = (0, react_1.useState)(""), exportType = _110[0], setExportType = _110[1];
+    var _111 = (0, react_1.useState)(false), exportQR = _111[0], setExportQR = _111[1];
+    var _112 = (0, react_1.useState)(function () {
         var _a, _b;
         var firstTabId = (_b = (_a = structure.find(function (item) { return item.tabId; })) === null || _a === void 0 ? void 0 : _a.tabId) !== null && _b !== void 0 ? _b : "";
         return firstTabId;
-    }), activeTab = _108[0], setActiveTab = _108[1];
-    var _109 = (0, react_1.useState)(false), signatureSigning = _109[0], setSignatureSigning = _109[1];
-    var _110 = (0, react_1.useState)({}), selectedData = _110[0], setSelectedData = _110[1];
-    var _111 = (0, react_1.useState)(""), selectedObjectStructureId = _111[0], setSelectedObjectStructureId = _111[1];
-    var _112 = (0, react_1.useState)(""), selectedObjectId = _112[0], setSelectedObjectId = _112[1];
-    var _113 = (0, react_1.useState)(""), selectedListAddressId = _113[0], setSelectedListAddressId = _113[1];
-    var _114 = (0, react_1.useState)(-1), selectedListAddressIndex = _114[0], setSelectedListAddressIndex = _114[1];
-    var _115 = (0, react_1.useState)({
+    }), activeTab = _112[0], setActiveTab = _112[1];
+    var _113 = (0, react_1.useState)(false), signatureSigning = _113[0], setSignatureSigning = _113[1];
+    var _114 = (0, react_1.useState)({}), selectedData = _114[0], setSelectedData = _114[1];
+    var _115 = (0, react_1.useState)(""), selectedObjectStructureId = _115[0], setSelectedObjectStructureId = _115[1];
+    var _116 = (0, react_1.useState)(""), selectedObjectId = _116[0], setSelectedObjectId = _116[1];
+    var _117 = (0, react_1.useState)(""), selectedListAddressId = _117[0], setSelectedListAddressId = _117[1];
+    var _118 = (0, react_1.useState)(-1), selectedListAddressIndex = _118[0], setSelectedListAddressIndex = _118[1];
+    var _119 = (0, react_1.useState)({
         lat: 0,
         lng: 0,
         name: "",
-    }), selectedListAddress = _115[0], setSelectedListAddress = _115[1];
-    var _116 = (0, react_1.useState)({}), selectedObjectData = _116[0], setSelectedObjectData = _116[1];
-    var _117 = (0, react_1.useState)(false), referenceLoading = _117[0], setReferenceLoading = _117[1];
-    var _118 = (0, react_1.useState)({}), referencesOptions = _118[0], setReferencesOptions = _118[1];
-    var _119 = (0, react_1.useState)({}), referencesDetails = _119[0], setReferencesDetails = _119[1];
-    var _120 = (0, react_1.useState)({}), referenceDeleteTableData = _120[0], setReferenceDeleteTableData = _120[1];
-    var _121 = (0, react_1.useState)(0), referenceDeleteIndex = _121[0], setReferenceDeleteIndex = _121[1];
-    var _122 = (0, react_1.useState)({
+    }), selectedListAddress = _119[0], setSelectedListAddress = _119[1];
+    var _120 = (0, react_1.useState)({}), selectedObjectData = _120[0], setSelectedObjectData = _120[1];
+    var _121 = (0, react_1.useState)(false), referenceLoading = _121[0], setReferenceLoading = _121[1];
+    var _122 = (0, react_1.useState)({}), referencesOptions = _122[0], setReferencesOptions = _122[1];
+    var _123 = (0, react_1.useState)({}), referencesDetails = _123[0], setReferencesDetails = _123[1];
+    var _124 = (0, react_1.useState)({}), referenceDeleteTableData = _124[0], setReferenceDeleteTableData = _124[1];
+    var _125 = (0, react_1.useState)(0), referenceDeleteIndex = _125[0], setReferenceDeleteIndex = _125[1];
+    var _126 = (0, react_1.useState)({
         id: "",
         name: "",
         type: "string",
-    }), referenceCreationModal = _122[0], setReferenceCreationModal = _122[1];
-    var _123 = (0, react_1.useState)({}), referenceModelSchema = _123[0], setReferenceSchema = _123[1];
-    var _124 = (0, react_1.useState)([]), kanbanChecked = _124[0], setKanbanChecked = _124[1];
+    }), referenceCreationModal = _126[0], setReferenceCreationModal = _126[1];
+    var _127 = (0, react_1.useState)({}), referenceModelSchema = _127[0], setReferenceSchema = _127[1];
+    var _128 = (0, react_1.useState)([]), kanbanChecked = _128[0], setKanbanChecked = _128[1];
     //INFO : Offline
-    var _125 = (0, react_1.useState)(0), offlineDataLength = _125[0], setOfflineDataLength = _125[1];
-    var _126 = (0, react_1.useState)(false), offlineModal = _126[0], setOfflineModal = _126[1];
+    var _129 = (0, react_1.useState)(0), offlineDataLength = _129[0], setOfflineDataLength = _129[1];
+    var _130 = (0, react_1.useState)(false), offlineModal = _130[0], setOfflineModal = _130[1];
     var previousType = (0, react_1.useRef)(null);
     var previousSelectedData = (0, react_1.useRef)(null);
     var scrollSentinelRef = (0, react_1.useRef)(null);
@@ -511,15 +526,92 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     ].filter(Boolean);
     if ((_33 = props.organise) === null || _33 === void 0 ? void 0 : _33.moreSettings)
         moreButtonPopUp = moreButtonPopUp.concat(props.organise.moreSettings);
+    //=====================================================================================
+    //SECTION: Flex Filter Handlers
+    //=====================================================================================
+    var handleFlexFilterAdd = function () {
+        var newFilter = {
+            id: (0, uuid_1.v4)(),
+            columnId: "",
+            operator: "=",
+            value: undefined,
+        };
+        setFlexFilters(__spreadArray(__spreadArray([], flexFilters, true), [newFilter], false));
+    };
+    var handleFlexFilterRemove = function (filterId) {
+        var remaining = flexFilters.filter(function (f) { return f.id !== filterId; });
+        // INFO: Always keep at least one empty row visible
+        if (remaining.length === 0) {
+            setFlexFilters([
+                { id: (0, uuid_1.v4)(), columnId: "", operator: "=", value: undefined },
+            ]);
+        }
+        else {
+            setFlexFilters(remaining);
+        }
+    };
+    var handleFlexFilterClearAll = function () {
+        // INFO: Reset to one empty row so the UI never shows a blank state
+        setFlexFilters([
+            { id: (0, uuid_1.v4)(), columnId: "", operator: "=", value: undefined },
+        ]);
+    };
+    var handleFlexFilterColumnChange = function (filterId, columnId) {
+        setFlexFilters(flexFilters.map(function (f) {
+            if (f.id !== filterId)
+                return f;
+            // INFO: Reset operator and value when column changes since available operators differ per type
+            var ds = structure.find(function (s) { return s.id === columnId; });
+            var operators = ds ? flexFilterModel_1.FLEX_FILTER_OPERATOR_MAP[ds.type] : undefined;
+            var defaultOperator = operators && operators.length > 0 ? operators[0] : "=";
+            return __assign(__assign({}, f), { columnId: columnId, operator: defaultOperator, value: undefined });
+        }));
+    };
+    var handleFlexFilterOperatorChange = function (filterId, operator) {
+        setFlexFilters(flexFilters.map(function (f) {
+            if (f.id !== filterId)
+                return f;
+            // INFO: Reset value when operator changes to avoid type mismatch
+            return __assign(__assign({}, f), { operator: operator, value: undefined });
+        }));
+    };
+    var handleFlexFilterValueChange = function (filterId, value) {
+        setFlexFilters(flexFilters.map(function (f) { return (f.id === filterId ? __assign(__assign({}, f), { value: value }) : f); }));
+    };
+    var handleFlexFilterReferenceOptionsLoaded = function (columnId, options) {
+        setFlexFilterReferenceOptions(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[columnId] = options, _a)));
+        });
+    };
+    var handleFlexFilterReferenceSearch = function (columnId, search) {
+        setFlexFilterReferenceSearch(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[columnId] = search, _a)));
+        });
+    };
     var renderImpSearchFilterConditions = function () {
         var _a;
-        return (0, listModule_1.renderSearchFilterConditions)(structure, devSettings, {
+        var query = (0, listModule_1.renderSearchFilterConditions)(structure, devSettings, {
             filterSearchParams: filterSearchParams,
             filterSelection: filterSelection,
             filterReferenceDate: filterReferenceDate,
             filterReference: filterReference,
             filterDraft: filterDraft,
         }, additionalQuery !== null && additionalQuery !== void 0 ? additionalQuery : [], (_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareListFilterQuery, selectedTab);
+        // INFO: Merge flex filter conditions into the query array
+        if (flexFilters.length > 0) {
+            var flexQuery = (0, listModule_1.renderFlexFilterConditions)(flexFilters, structure);
+            if (flexQuery.length > 0) {
+                if (query) {
+                    query = __spreadArray(__spreadArray([], query, true), flexQuery, true);
+                }
+                else {
+                    query = flexQuery;
+                }
+            }
+        }
+        return query;
     };
     (0, react_1.useImperativeHandle)(ref, function () { return ({
         handleRefresh: handleRefresh,
@@ -5895,7 +5987,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         props.renderSettings.renderListUI(actionComponent, filterComponent_1, dataComponent)));
                 }
                 var renderListFilterElements = function () {
-                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
                     // INFO: When bareListFilterAsPopup is true, filters are shown in a popup instead.
                     if ((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareListFilterAsPopup)
                         return null;
@@ -5905,20 +5997,21 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     // is the Search box from renderSearchFilterComponents). Use a
                     // shrinkable fixed width so the search box stays on the same row
                     // as the action icons at every viewport.
-                    if ((_b = props.bareSettings) === null || _b === void 0 ? void 0 : _b.bareCompactMode) {
+                    if (((_b = props.bareSettings) === null || _b === void 0 ? void 0 : _b.bareCompactMode) ||
+                        ((_c = props.bareSettings) === null || _c === void 0 ? void 0 : _c.bareFlexFilters)) {
                         if (filterComponent_1 &&
                             Array.isArray(filterComponent_1) &&
                             filterComponent_1.length > 0 &&
-                            !((_c = props.organise) === null || _c === void 0 ? void 0 : _c.hideSearch)) {
+                            !((_d = props.organise) === null || _d === void 0 ? void 0 : _d.hideSearch)) {
                             var searchInput = filterComponent_1[filterComponent_1.length - 1];
                             return (react_1.default.createElement("div", { className: "flex-1 sm:flex-none sm:w-64 min-w-0 mr-3" }, searchInput));
                         }
                         return null;
                     }
                     var filterElementList = [];
-                    if (!((_d = props.organise) === null || _d === void 0 ? void 0 : _d.filterComponentNewRow)) {
-                        if ((_e = props.organise) === null || _e === void 0 ? void 0 : _e.showGroupByFeature) {
-                            filterElementList.push(react_1.default.createElement(select_1.Select, { label: "Group", options: (_l = (_h = (_g = (_f = props === null || props === void 0 ? void 0 : props.organise) === null || _f === void 0 ? void 0 : _f.renderGroupByOptions) === null || _g === void 0 ? void 0 : _g.call(_f)) !== null && _h !== void 0 ? _h : (_k = (_j = props === null || props === void 0 ? void 0 : props.organise) === null || _j === void 0 ? void 0 : _j.renderReferenceLabelOptions) === null || _k === void 0 ? void 0 : _k.call(_j, props.collectionId, true)) !== null && _l !== void 0 ? _l : [], value: groupId !== null && groupId !== void 0 ? groupId : "", onChange: function (value) { return setGroupId(value); } }));
+                    if (!((_e = props.organise) === null || _e === void 0 ? void 0 : _e.filterComponentNewRow)) {
+                        if ((_f = props.organise) === null || _f === void 0 ? void 0 : _f.showGroupByFeature) {
+                            filterElementList.push(react_1.default.createElement(select_1.Select, { label: "Group", options: (_m = (_j = (_h = (_g = props === null || props === void 0 ? void 0 : props.organise) === null || _g === void 0 ? void 0 : _g.renderGroupByOptions) === null || _h === void 0 ? void 0 : _h.call(_g)) !== null && _j !== void 0 ? _j : (_l = (_k = props === null || props === void 0 ? void 0 : props.organise) === null || _k === void 0 ? void 0 : _k.renderReferenceLabelOptions) === null || _l === void 0 ? void 0 : _l.call(_k, props.collectionId, true)) !== null && _m !== void 0 ? _m : [], value: groupId !== null && groupId !== void 0 ? groupId : "", onChange: function (value) { return setGroupId(value); } }));
                         }
                         if (filterComponent_1 &&
                             Array.isArray(filterComponent_1) &&
@@ -5933,7 +6026,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         return null;
                 };
                 var renderListActionElements = function () {
-                    var _a, _b, _c, _d, _e, _f, _g;
+                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
                     var actionElementList = [];
                     if (schemaPresent) {
                         actionElementList.push(react_1.default.createElement(react_1.default.Fragment, null,
@@ -5953,32 +6046,72 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     }
                     if ((((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareListFilterAsPopup) ||
                         ((_b = props.bareSettings) === null || _b === void 0 ? void 0 : _b.bareCompactMode)) &&
+                        !((_c = props.bareSettings) === null || _c === void 0 ? void 0 : _c.bareFlexFilters) &&
                         filterComponent_1 &&
                         Array.isArray(filterComponent_1) &&
                         filterComponent_1.length > 0) {
                         // INFO: in compact mode, the search input is rendered inline by
                         // renderListFilterElements, so drop the trailing search element
                         // from the popup to avoid duplication.
-                        var popupFilters = ((_c = props.bareSettings) === null || _c === void 0 ? void 0 : _c.bareCompactMode) && !((_d = props.organise) === null || _d === void 0 ? void 0 : _d.hideSearch)
+                        var popupFilters = ((_d = props.bareSettings) === null || _d === void 0 ? void 0 : _d.bareCompactMode) && !((_e = props.organise) === null || _e === void 0 ? void 0 : _e.hideSearch)
                             ? filterComponent_1.slice(0, -1)
                             : filterComponent_1;
                         if (popupFilters.length > 0) {
-                            actionElementList.push(react_1.default.createElement(popUp_1.PopUp, { ctaComp: react_1.default.createElement(iconButton_1.IconButton, { icon: react_1.default.createElement(outline_1.FunnelIcon, { className: "h-7 w-7 text-primary-500" }), bgColor: "bg-white" }), renderComp: react_1.default.createElement("div", { className: "shadow-lg p-4 flex flex-col space-y-3 w-[calc(100vw-2rem)] max-w-[320px]" }, popupFilters.map(function (filterEl, index) { return (react_1.default.createElement("div", { key: index }, filterEl)); })), anchor: "right", excludePortalIds: ["datepicker-portal"], lib: { Transition: (_e = props === null || props === void 0 ? void 0 : props.lib) === null || _e === void 0 ? void 0 : _e.Transition } }));
+                            actionElementList.push(react_1.default.createElement(popUp_1.PopUp, { ctaComp: react_1.default.createElement(iconButton_1.IconButton, { icon: react_1.default.createElement(outline_1.FunnelIcon, { className: "h-7 w-7 text-primary-500" }), bgColor: "bg-white" }), renderComp: react_1.default.createElement("div", { className: "shadow-lg p-4 flex flex-col space-y-3 w-[calc(100vw-2rem)] max-w-[320px]" }, popupFilters.map(function (filterEl, index) { return (react_1.default.createElement("div", { key: index }, filterEl)); })), anchor: "right", excludePortalIds: ["datepicker-portal"], lib: { Transition: (_f = props === null || props === void 0 ? void 0 : props.lib) === null || _f === void 0 ? void 0 : _f.Transition } }));
                         }
                     }
+                    // INFO: Flex filter — desktop uses PopUp, mobile uses Modal
+                    if ((_g = props.bareSettings) === null || _g === void 0 ? void 0 : _g.bareFlexFilters) {
+                        var flexActions = {
+                            handleAddFilter: handleFlexFilterAdd,
+                            handleRemoveFilter: handleFlexFilterRemove,
+                            handleClearAllFilters: handleFlexFilterClearAll,
+                            handleColumnChange: handleFlexFilterColumnChange,
+                            handleOperatorChange: handleFlexFilterOperatorChange,
+                            handleValueChange: handleFlexFilterValueChange,
+                            handleReferenceOptionsLoaded: handleFlexFilterReferenceOptionsLoaded,
+                            handleReferenceSearch: handleFlexFilterReferenceSearch,
+                        };
+                        // INFO: Search input will only render above flex filters if bareListFilterAsPopup is true
+                        var searchInput = !isFirebase &&
+                            ((_h = props.bareSettings) === null || _h === void 0 ? void 0 : _h.bareListFilterAsPopup) &&
+                            !((_j = props.organise) === null || _j === void 0 ? void 0 : _j.hideSearch) &&
+                            filterComponent_1 &&
+                            Array.isArray(filterComponent_1) &&
+                            filterComponent_1.length > 0
+                            ? filterComponent_1[filterComponent_1.length - 1]
+                            : undefined;
+                        var flexFilterLength_1 = (_k = flexFilters.filter(function (eachFilter) {
+                            return eachFilter.columnId && eachFilter.operator && eachFilter.value;
+                        })) === null || _k === void 0 ? void 0 : _k.length;
+                        if (filterSearchParams === null || filterSearchParams === void 0 ? void 0 : filterSearchParams["search"])
+                            flexFilterLength_1 += 1;
+                        var flexFilterIconBtn = function (mobile) {
+                            return (react_1.default.createElement("div", { className: "relative w-fit h-fit" },
+                                flexFilterLength_1 > 0 && (react_1.default.createElement("div", { className: "absolute top-0 right-0 translate-x-1/4 -translate-y-1/4 z-[1] rounded-full bg-primary-500 text-white flex items-center justify-center w-5 h-5 text-[10px]" }, flexFilterLength_1)),
+                                react_1.default.createElement(iconButton_1.IconButton, { icon: react_1.default.createElement(outline_1.FunnelIcon, { className: "h-7 w-7 text-primary-500" }), bgColor: "bg-white", onClick: mobile ? function () { return setFlexFilterModalOpen(true); } : undefined })));
+                        };
+                        // INFO: Desktop — PopUp (hidden on mobile)
+                        actionElementList.push(react_1.default.createElement("div", { className: "hidden md:block" },
+                            react_1.default.createElement(popUp_1.PopUp, { ctaComp: flexFilterIconBtn(), renderComp: (0, flexFilterModule_1.renderFlexFilterPopupContent)(flexFilters, structure, devSettings, dbModule, flexFilterReferenceOptions, flexFilterReferenceSearch, flexActions, (_l = props.bareSettings) === null || _l === void 0 ? void 0 : _l.bareListFilterQuery, searchInput), anchor: "right", excludePortalIds: ["datepicker-portal"], lib: { Transition: (_m = props === null || props === void 0 ? void 0 : props.lib) === null || _m === void 0 ? void 0 : _m.Transition } })));
+                        // INFO: Mobile — IconButton that opens a Modal (hidden on desktop)
+                        actionElementList.push(react_1.default.createElement("div", { className: "block md:hidden" },
+                            flexFilterIconBtn(true),
+                            (0, flexFilterModule_1.renderFlexFilterModal)(flexFilterModalOpen, flexFilters, structure, devSettings, dbModule, flexFilterReferenceOptions, flexFilterReferenceSearch, flexActions, function () { return setFlexFilterModalOpen(false); }, (_o = props.bareSettings) === null || _o === void 0 ? void 0 : _o.bareListFilterQuery, searchInput)));
+                    }
                     if (!isBottom) {
                         var actionBtns = renderActionButtons(props.type);
                         if (actionBtns)
                             actionElementList.push(actionBtns);
                     }
-                    if (schemaPresent || ((_f = props.organise) === null || _f === void 0 ? void 0 : _f.showExport)) {
+                    if (schemaPresent || ((_p = props.organise) === null || _p === void 0 ? void 0 : _p.showExport)) {
                         actionElementList.push(react_1.default.createElement(popUp_1.PopUp, { ctaComp: react_1.default.createElement(iconButton_1.IconButton, { className: "bg-primary-100", icon: react_1.default.createElement(solid_1.EllipsisVerticalIcon, { className: "h-7 w-7 text-primary-500" }), bgColor: "bg-white" }), renderComp: react_1.default.createElement("div", { className: "shadow-lg" }, moreButtonPopUp.map(function (eachPopup) { return (
                             //TODO: Bug - Crash on Next Js
                             // <Menu.Item>
                             react_1.default.createElement("span", { className: "block w-40 py-3 text-sm text-center text-gray-700 cursor-pointer hover:bg-gray-100", onClick: eachPopup === null || eachPopup === void 0 ? void 0 : eachPopup.onClick }, eachPopup === null || eachPopup === void 0 ? void 0 : eachPopup.text)
                             // </Menu.Item>
                             ); })), lib: {
-                                Transition: (_g = props === null || props === void 0 ? void 0 : props.lib) === null || _g === void 0 ? void 0 : _g.Transition,
+                                Transition: (_q = props === null || props === void 0 ? void 0 : props.lib) === null || _q === void 0 ? void 0 : _q.Transition,
                             } }));
                     }
                     if (actionElementList.length > 0) {
@@ -5988,17 +6121,19 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         return null;
                 };
                 var renderListNewRowFilterElements = function () {
-                    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
                     var filterElementList = [];
                     // INFO: bareCompactMode + bareListFilterAsPopup both tuck filters
                     // behind the popup, so skip the new-row render path too.
+                    // bareFlexFilters also skips since additionalQuery is replaced.
                     if (((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareListFilterAsPopup) ||
-                        ((_b = props.bareSettings) === null || _b === void 0 ? void 0 : _b.bareCompactMode)) {
+                        ((_b = props.bareSettings) === null || _b === void 0 ? void 0 : _b.bareCompactMode) ||
+                        ((_c = props.bareSettings) === null || _c === void 0 ? void 0 : _c.bareFlexFilters)) {
                         return filterElementList;
                     }
-                    if ((_c = props.organise) === null || _c === void 0 ? void 0 : _c.filterComponentNewRow) {
+                    if ((_d = props.organise) === null || _d === void 0 ? void 0 : _d.filterComponentNewRow) {
                         if (props.organise.showGroupByFeature) {
-                            filterElementList.push(react_1.default.createElement(select_1.Select, { label: "Group", options: (_j = (_f = (_e = (_d = props === null || props === void 0 ? void 0 : props.organise) === null || _d === void 0 ? void 0 : _d.renderGroupByOptions) === null || _e === void 0 ? void 0 : _e.call(_d)) !== null && _f !== void 0 ? _f : (_h = (_g = props === null || props === void 0 ? void 0 : props.organise) === null || _g === void 0 ? void 0 : _g.renderReferenceLabelOptions) === null || _h === void 0 ? void 0 : _h.call(_g, props.collectionId, true)) !== null && _j !== void 0 ? _j : [], value: groupId !== null && groupId !== void 0 ? groupId : "", onChange: function (value) { return setGroupId(value); } }));
+                            filterElementList.push(react_1.default.createElement(select_1.Select, { label: "Group", options: (_k = (_g = (_f = (_e = props === null || props === void 0 ? void 0 : props.organise) === null || _e === void 0 ? void 0 : _e.renderGroupByOptions) === null || _f === void 0 ? void 0 : _f.call(_e)) !== null && _g !== void 0 ? _g : (_j = (_h = props === null || props === void 0 ? void 0 : props.organise) === null || _h === void 0 ? void 0 : _h.renderReferenceLabelOptions) === null || _j === void 0 ? void 0 : _j.call(_h, props.collectionId, true)) !== null && _k !== void 0 ? _k : [], value: groupId !== null && groupId !== void 0 ? groupId : "", onChange: function (value) { return setGroupId(value); } }));
                         }
                         if (filterComponent_1 &&
                             Array.isArray(filterComponent_1) &&
@@ -6020,7 +6155,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 return (react_1.default.createElement(react_1.default.Fragment, null,
                     listReadQueryHOC,
                     react_1.default.createElement("div", { className: "flex py-2 ".concat(((_23 = props.bareSettings) === null || _23 === void 0 ? void 0 : _23.bareCompactMode)
-                            ? "w-full flex-row items-end"
+                            ? "w-full flex-row flex-wrap sm:flex-nowrap items-end"
                             : "flex-col md:items-end md:flex-row") },
                         (props.title || props.description) && (react_1.default.createElement("div", { className: "flex flex-col" },
                             props.title && (react_1.default.createElement("p", { className: "text-xl font-medium" }, props.title)),
@@ -6391,7 +6526,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         return (react_1.default.createElement(settingsModal_1.ExpressionModal, { selectedId: id, model: structure, renderReferenceLabelOptions: (_a = props.organise) === null || _a === void 0 ? void 0 : _a.renderReferenceLabelOptions, renderReferenceSpaceOptions: (_b = props.organise) === null || _b === void 0 ? void 0 : _b.renderReferenceSpaceOptions, onAddModelSchema: (_c = props.organise) === null || _c === void 0 ? void 0 : _c.onAddColumns, onClose: onClose }));
     };
     var renderGroupTable = function (multipleSelect) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5;
         if (groupId) {
             var groupAttributeDS_1 = structure.find(function (eachDS) { return eachDS.id === groupId; });
             var groupedSpaceTableData = spaceTableData.reduce(function (acc, eachData) {
@@ -6419,7 +6554,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             }
             else {
                 return Object.entries(groupedSpaceTableData).map(function (_a) {
-                    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5;
+                    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6;
                     var eachKey = _a[0], eachValue = _a[1];
                     var dataList = eachValue;
                     var ids = (dataList === null || dataList === void 0 ? void 0 : dataList.map(function (eachData) { return eachData._id; })) || [];
@@ -6461,11 +6596,13 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                 renderAddColumnElements: renderAddMathColumn,
                                 dragEnabled: (_u = props.organise) === null || _u === void 0 ? void 0 : _u.advDragEnabled,
                                 sortEnabled: (_v = props.organise) === null || _v === void 0 ? void 0 : _v.advSortEnabled,
-                                filterEnabled: (_w = props.organise) === null || _w === void 0 ? void 0 : _w.advFilterEnabled,
-                                sortId: (_x = props.organise) === null || _x === void 0 ? void 0 : _x.sort,
-                                sortOptions: (_z = (_y = props.organise) === null || _y === void 0 ? void 0 : _y.renderReferenceLabelOptions) === null || _z === void 0 ? void 0 : _z.call(_y),
-                                onSortColumn: (_0 = props.organise) === null || _0 === void 0 ? void 0 : _0.onChangeSort,
-                                onDragColumn: (_1 = props.organise) === null || _1 === void 0 ? void 0 : _1.onChangeDrag,
+                                filterEnabled: ((_w = props.bareSettings) === null || _w === void 0 ? void 0 : _w.bareFlexFilters)
+                                    ? false
+                                    : (_x = props.organise) === null || _x === void 0 ? void 0 : _x.advFilterEnabled,
+                                sortId: (_y = props.organise) === null || _y === void 0 ? void 0 : _y.sort,
+                                sortOptions: (_0 = (_z = props.organise) === null || _z === void 0 ? void 0 : _z.renderReferenceLabelOptions) === null || _0 === void 0 ? void 0 : _0.call(_z),
+                                onSortColumn: (_1 = props.organise) === null || _1 === void 0 ? void 0 : _1.onChangeSort,
+                                onDragColumn: (_2 = props.organise) === null || _2 === void 0 ? void 0 : _2.onChangeDrag,
                                 filterOptions: additionalQuery === null || additionalQuery === void 0 ? void 0 : additionalQuery.map(function (eachQuery) {
                                     var _a;
                                     return {
@@ -6482,7 +6619,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                     return renderSearchContent(newQuery);
                                 },
                             }, editable: {
-                                active: ((_2 = props.edit) === null || _2 === void 0 ? void 0 : _2.listEditable) && !props.edit.disabledUpdate
+                                active: ((_3 = props.edit) === null || _3 === void 0 ? void 0 : _3.listEditable) && !props.edit.disabledUpdate
                                     ? true
                                     : false,
                                 onUpdateData: function (rowId, columnId, data) { return __awaiter(void 0, void 0, void 0, function () {
@@ -6496,7 +6633,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                     });
                                 }); },
                             }, addable: {
-                                active: ((_3 = props.edit) === null || _3 === void 0 ? void 0 : _3.listAddable) ? true : false,
+                                active: ((_4 = props.edit) === null || _4 === void 0 ? void 0 : _4.listAddable) ? true : false,
                                 onAddData: function (data) { return __awaiter(void 0, void 0, void 0, function () {
                                     return __generator(this, function (_a) {
                                         switch (_a.label) {
@@ -6507,7 +6644,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                         }
                                     });
                                 }); },
-                            }, darkMode: (_4 = props.organise) === null || _4 === void 0 ? void 0 : _4.darkMode, hidePagination: true, disableEllipsisOnLongWord: (_5 = props.organise) === null || _5 === void 0 ? void 0 : _5.disableEllipsisOnLongWord })));
+                            }, darkMode: (_5 = props.organise) === null || _5 === void 0 ? void 0 : _5.darkMode, hidePagination: true, disableEllipsisOnLongWord: (_6 = props.organise) === null || _6 === void 0 ? void 0 : _6.disableEllipsisOnLongWord })));
                 });
             }
         }
@@ -6545,11 +6682,13 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     renderAddColumnElements: renderAddMathColumn,
                     dragEnabled: (_s = props.organise) === null || _s === void 0 ? void 0 : _s.advDragEnabled,
                     sortEnabled: (_t = props.organise) === null || _t === void 0 ? void 0 : _t.advSortEnabled,
-                    filterEnabled: (_u = props.organise) === null || _u === void 0 ? void 0 : _u.advFilterEnabled,
-                    sortId: (_v = props.organise) === null || _v === void 0 ? void 0 : _v.sort,
-                    sortOptions: (_x = (_w = props.organise) === null || _w === void 0 ? void 0 : _w.renderReferenceLabelOptions) === null || _x === void 0 ? void 0 : _x.call(_w),
-                    onSortColumn: (_y = props.organise) === null || _y === void 0 ? void 0 : _y.onChangeSort,
-                    onDragColumn: (_z = props.organise) === null || _z === void 0 ? void 0 : _z.onChangeDrag,
+                    filterEnabled: ((_u = props.bareSettings) === null || _u === void 0 ? void 0 : _u.bareFlexFilters)
+                        ? false
+                        : (_v = props.organise) === null || _v === void 0 ? void 0 : _v.advFilterEnabled,
+                    sortId: (_w = props.organise) === null || _w === void 0 ? void 0 : _w.sort,
+                    sortOptions: (_y = (_x = props.organise) === null || _x === void 0 ? void 0 : _x.renderReferenceLabelOptions) === null || _y === void 0 ? void 0 : _y.call(_x),
+                    onSortColumn: (_z = props.organise) === null || _z === void 0 ? void 0 : _z.onChangeSort,
+                    onDragColumn: (_0 = props.organise) === null || _0 === void 0 ? void 0 : _0.onChangeDrag,
                     filterOptions: additionalQuery === null || additionalQuery === void 0 ? void 0 : additionalQuery.map(function (eachQuery) {
                         var _a;
                         return {
@@ -6566,7 +6705,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         return renderSearchContent(newQuery);
                     },
                 }, editable: {
-                    active: ((_0 = props.edit) === null || _0 === void 0 ? void 0 : _0.listEditable) && !props.edit.disabledUpdate
+                    active: ((_1 = props.edit) === null || _1 === void 0 ? void 0 : _1.listEditable) && !props.edit.disabledUpdate
                         ? true
                         : false,
                     onUpdateData: function (rowId, columnId, data) { return __awaiter(void 0, void 0, void 0, function () {
@@ -6580,7 +6719,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         });
                     }); },
                 }, addable: {
-                    active: ((_1 = props.edit) === null || _1 === void 0 ? void 0 : _1.listAddable) ? true : false,
+                    active: ((_2 = props.edit) === null || _2 === void 0 ? void 0 : _2.listAddable) ? true : false,
                     onAddData: function (data) { return __awaiter(void 0, void 0, void 0, function () {
                         return __generator(this, function (_a) {
                             switch (_a.label) {
@@ -6591,7 +6730,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             }
                         });
                     }); },
-                }, darkMode: (_2 = props.organise) === null || _2 === void 0 ? void 0 : _2.darkMode, hidePagination: (_3 = props.organise) === null || _3 === void 0 ? void 0 : _3.hidePagination, customPaginationSize: customPaginationSize, disableEllipsisOnLongWord: (_4 = props.organise) === null || _4 === void 0 ? void 0 : _4.disableEllipsisOnLongWord }));
+                }, darkMode: (_3 = props.organise) === null || _3 === void 0 ? void 0 : _3.darkMode, hidePagination: (_4 = props.organise) === null || _4 === void 0 ? void 0 : _4.hidePagination, customPaginationSize: customPaginationSize, disableEllipsisOnLongWord: (_5 = props.organise) === null || _5 === void 0 ? void 0 : _5.disableEllipsisOnLongWord }));
         }
     };
     var renderTabContent = function (tabs, dataType, viewType) {