@databrainhq/plugin 0.9.13 → 0.9.14

package/dist/index.es.js

@@ -2533,14 +2533,13 @@ const floatingCreateButtonIcon = "_floatingCreateButtonIcon_12kmo_399";
 const floatingButton = "_floatingButton_12kmo_407";
 const staticContainer = "_staticContainer_12kmo_415";
 const floatingContainer = "_floatingContainer_12kmo_423";
-const filterButton = "_filterButton_12kmo_439";
+const filterButton$1 = "_filterButton_12kmo_439";
 const filterText$1 = "_filterText_12kmo_447";
-const filterLength = "_filterLength_12kmo_455";
+const filterLength$1 = "_filterLength_12kmo_455";
 var styles$M = {
   container: container$i,
   "static": "_static_12kmo_415",
   fixed,
-  "ml-[40px]": "_ml-[40px]_12kmo_1",
   inline,
   flex,
   table: table$3,
@@ -2549,7 +2548,6 @@ var styles$M = {
   hidden,
   "h-[10%]": "_h-[10%]_12kmo_1",
   "w-full": "_w-full_12kmo_1",
-  "w-[400px]": "_w-[400px]_12kmo_1",
   transform,
   resize,
   truncate,
@@ -2573,9 +2571,9 @@ var styles$M = {
   floatingButton,
   staticContainer,
   floatingContainer,
-  filterButton,
+  filterButton: filterButton$1,
   filterText: filterText$1,
-  filterLength,
+  filterLength: filterLength$1,
   "hover:cursor-pointer": "_hover:cursor-pointer_12kmo_1",
   "hover:cursor-text": "_hover:cursor-text_12kmo_1",
   "disabled:cursor-text": "_disabled:cursor-text_12kmo_1",
@@ -6488,27 +6486,99 @@ const TextAreaField = ({
     })]
   });
 };
-const group$1 = "_group_13otg_1";
-const button$8 = "_button_13otg_9";
-const checkbox = "_checkbox_13otg_17";
-const enabled = "_enabled_13otg_43";
-const notenabled = "_notenabled_13otg_59";
-const label$4 = "_label_13otg_75";
-const labelActive = "_labelActive_13otg_83";
-const labelInactive = "_labelInactive_13otg_91";
+const Switch = ({
+  name,
+  styles: styles2,
+  placeholder,
+  enabled: enabled2
+}) => {
+  return /* @__PURE__ */ jsxs("label", {
+    htmlFor: name,
+    className: `${styles2.button}`,
+    children: [Array.isArray(placeholder) && /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsx("span", {
+        className: ` ${styles2.label} ${!enabled2 ? styles2.labelActive : styles2.labelInactive}`,
+        children: placeholder[0]
+      }), /* @__PURE__ */ jsx("span", {
+        className: ` ${styles2.switch} ${enabled2 ? styles2.enabled : styles2.notenabled}`
+      }), /* @__PURE__ */ jsx("span", {
+        className: ` ${styles2.label} ${enabled2 ? styles2.labelActive : styles2.labelInactive}`,
+        children: placeholder[1]
+      })]
+    }), typeof placeholder === "string" && /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsx("span", {
+        className: ` ${styles2.switch} ${enabled2 ? styles2.enabled : styles2.notenabled}`
+      }), /* @__PURE__ */ jsx("span", {
+        className: ` ${styles2.label} ${enabled2 ? styles2.labelActive : styles2.labelInactive}`,
+        children: placeholder
+      })]
+    }), !Array.isArray(placeholder) && typeof placeholder !== "string" && /* @__PURE__ */ jsx("span", {
+      className: ` ${styles2.switch} ${enabled2 ? styles2.enabled : styles2.notenabled}`
+    })]
+  });
+};
+const group$1 = "_group_2xttg_1";
+const button$8 = "_button_2xttg_9";
+const toggleWidth = "_toggleWidth_2xttg_15";
+const checkbox = "_checkbox_2xttg_23";
+const enabled = "_enabled_2xttg_49";
+const notenabled = "_notenabled_2xttg_65";
+const toggle = "_toggle_2xttg_15";
+const label$4 = "_label_2xttg_89";
+const labelActive = "_labelActive_2xttg_97";
+const labelInactive = "_labelInactive_2xttg_105";
+const toggleInactive = "_toggleInactive_2xttg_113";
 var styles$B = {
   group: group$1,
   button: button$8,
+  toggleWidth,
   checkbox,
-  "switch": "_switch_13otg_25",
+  "switch": "_switch_2xttg_31",
   enabled,
   notenabled,
+  toggle,
   label: label$4,
   labelActive,
-  labelInactive
+  labelInactive,
+  toggleInactive
+};
+const Toggle = ({
+  name,
+  styles: styles2,
+  placeholder,
+  enabled: enabled2
+}) => {
+  return /* @__PURE__ */ jsxs("label", {
+    htmlFor: name,
+    className: `${styles2.button} ${styles2.toggleWidth}`,
+    children: [Array.isArray(placeholder) && /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsx("span", {
+        className: ` ${styles2.label} ${enabled2 && styles2.toggleInactive}`,
+        children: placeholder[0]
+      }), /* @__PURE__ */ jsx("span", {
+        className: ` ${styles2.switch} ${styles2.toggle} ${enabled2 ? styles2.enabled : styles2.notenabled}
+          `
+      }), /* @__PURE__ */ jsx("span", {
+        className: ` ${styles2.label} ${enabled2 || styles2.toggleInactive}`,
+        children: placeholder[1]
+      })]
+    }), typeof placeholder === "string" && /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsx("span", {
+        className: ` ${styles2.switch} ${styles2.toggle} ${enabled2 ? styles2.enabled : styles2.notenabled}
+          `
+      }), /* @__PURE__ */ jsx("span", {
+        className: ` ${styles2.label} ${enabled2 || styles2.labelInactive}`,
+        children: placeholder
+      })]
+    }), !Array.isArray(placeholder) && typeof placeholder !== "string" && /* @__PURE__ */ jsx("span", {
+      className: ` ${styles2.switch} ${styles2.toggle} ${enabled2 ? styles2.enabled : styles2.notenabled}
+       `
+    })]
+  });
 };
 const ToggleButton = ({
   enabled: enabled2,
+  variant = "switch",
   onChange,
   label: label2,
   className = "",
@@ -6532,18 +6602,16 @@ const ToggleButton = ({
         target
       }) => onChange == null ? void 0 : onChange(target.checked),
       className: styles$B.checkbox
-    }), /* @__PURE__ */ jsxs("label", {
-      htmlFor: name,
-      className: styles$B.button,
-      children: [/* @__PURE__ */ jsx("span", {
-        className: `${styles$B.switch} ${enabled2 ? styles$B.enabled : styles$B.notenabled}`
-      }), placeholder ? /* @__PURE__ */ jsx("span", {
-        className: `
-          ${styles$B.label}
-          ${enabled2 ? styles$B.labelActive : styles$B.labelInactive}
-        `,
-        children: placeholder
-      }) : null]
+    }), variant === "toggle" && /* @__PURE__ */ jsx(Toggle, {
+      name,
+      styles: styles$B,
+      placeholder,
+      enabled: enabled2
+    }), variant === "switch" && /* @__PURE__ */ jsx(Switch, {
+      name,
+      styles: styles$B,
+      placeholder,
+      enabled: enabled2
     })]
   });
 };
@@ -86704,38 +86772,41 @@ const FilterField = ({
     })
   });
 };
-const container$9 = "_container_550f5_1";
-const form$1 = "_form_550f5_7";
-const filterHeader = "_filterHeader_550f5_13";
-const titleContent = "_titleContent_550f5_19";
-const title = "_title_550f5_19";
-const buttons = "_buttons_550f5_31";
-const apply = "_apply_550f5_37";
-const applyIcon = "_applyIcon_550f5_43";
-const reset = "_reset_550f5_49";
-const filterFields = "_filterFields_550f5_55";
-const AddFilter$1 = "_AddFilter_550f5_61";
-const filterDropdown$1 = "_filterDropdown_550f5_67";
-const filters = "_filters_550f5_73";
-const filterItem = "_filterItem_550f5_79";
-const filterItemOperator = "_filterItemOperator_550f5_85";
-const remove = "_remove_550f5_91";
-const filterCol = "_filterCol_550f5_97";
-const filterText = "_filterText_550f5_103";
-const smallText = "_smallText_550f5_109";
-const numberField = "_numberField_550f5_117";
-const numberFieldWrapper = "_numberFieldWrapper_550f5_125";
-const numberFieldLabel = "_numberFieldLabel_550f5_133";
-const numberFieldLabelText = "_numberFieldLabelText_550f5_141";
-const numberFieldLabelSelectText = "_numberFieldLabelSelectText_550f5_149";
-const numberFieldButtonClass = "_numberFieldButtonClass_550f5_157";
-const numberFieldLabelMenuClass = "_numberFieldLabelMenuClass_550f5_165";
-const checkedOption$1 = "_checkedOption_550f5_173";
-const option = "_option_550f5_181";
-const addFilterMenu = "_addFilterMenu_550f5_189";
-const appliedFilterTag = "_appliedFilterTag_550f5_197";
-const appliedfilters = "_appliedfilters_550f5_205";
-const textBold = "_textBold_550f5_213";
+const container$9 = "_container_158ok_1";
+const form$1 = "_form_158ok_7";
+const filterHeader = "_filterHeader_158ok_13";
+const titleContent = "_titleContent_158ok_19";
+const title = "_title_158ok_19";
+const buttons = "_buttons_158ok_31";
+const apply = "_apply_158ok_37";
+const applyIcon = "_applyIcon_158ok_43";
+const reset = "_reset_158ok_49";
+const filterFields = "_filterFields_158ok_55";
+const AddFilter$1 = "_AddFilter_158ok_61";
+const filterDropdown$1 = "_filterDropdown_158ok_67";
+const filters = "_filters_158ok_73";
+const filterItem = "_filterItem_158ok_79";
+const filterItemOperator = "_filterItemOperator_158ok_85";
+const remove = "_remove_158ok_91";
+const filterCol = "_filterCol_158ok_97";
+const filterText = "_filterText_158ok_103";
+const smallText = "_smallText_158ok_109";
+const numberField = "_numberField_158ok_117";
+const numberFieldWrapper = "_numberFieldWrapper_158ok_125";
+const numberFieldLabel = "_numberFieldLabel_158ok_133";
+const numberFieldLabelText = "_numberFieldLabelText_158ok_141";
+const numberFieldLabelSelectText = "_numberFieldLabelSelectText_158ok_149";
+const numberFieldButtonClass = "_numberFieldButtonClass_158ok_157";
+const numberFieldLabelMenuClass = "_numberFieldLabelMenuClass_158ok_165";
+const checkedOption$1 = "_checkedOption_158ok_173";
+const option = "_option_158ok_181";
+const addFilterMenu = "_addFilterMenu_158ok_189";
+const appliedFilterTag = "_appliedFilterTag_158ok_197";
+const appliedfilters = "_appliedfilters_158ok_205";
+const textBold = "_textBold_158ok_213";
+const filterButton = "_filterButton_158ok_221";
+const filterBtnText = "_filterBtnText_158ok_229";
+const filterLength = "_filterLength_158ok_237";
 var styles$s = {
   container: container$9,
   form: form$1,
@@ -86768,7 +86839,10 @@ var styles$s = {
   addFilterMenu,
   appliedFilterTag,
   appliedfilters,
-  textBold
+  textBold,
+  filterButton,
+  filterBtnText,
+  filterLength
 };
 const NumberFilterField = ({
   setAppliedFilters,
@@ -86903,6 +86977,48 @@ const AddFilter = ({
     })
   });
 };
+const AppliedFilter = ({
+  appliedFilter,
+  setAppliedFilters,
+  onChangeFilters
+}) => {
+  return /* @__PURE__ */ jsx("div", {
+    className: styles$s.appliedfilters,
+    children: appliedFilter.map((filter2) => /* @__PURE__ */ jsxs("div", {
+      className: styles$s.appliedFilterTag,
+      children: [/* @__PURE__ */ jsx(Text, {
+        variant: "p",
+        styleClass: "font-14",
+        className: styles$s.textBold,
+        children: filter2.column
+      }), /* @__PURE__ */ jsx(Text, {
+        variant: "p",
+        styleClass: "font-14",
+        children: "is"
+      }), filter2.as !== "string" && filter2.as !== "boolean" && filter2.as !== "default" && /* @__PURE__ */ jsx(Text, {
+        variant: "p",
+        styleClass: "font-14",
+        children: "between"
+      }), /* @__PURE__ */ jsx(Text, {
+        variant: "p",
+        styleClass: "font-14",
+        className: styles$s.textBold,
+        children: Array.isArray(filter2.value) ? filter2.as === "string" ? filter2.value.join(", ") : filter2.value.join(" & ") : typeof filter2.value === "string" && filter2.as === "number" ? filter2.value.replace("AND", "&") : typeof filter2.value === "string" && filter2.as === "date" ? filter2.value.split(" ").slice(2).join(" ").replace("AND", "&") : filter2.value
+      }), /* @__PURE__ */ jsx(Button, {
+        variant: "secondary",
+        type: "button",
+        onClick: () => {
+          setAppliedFilters((prev) => prev.filter((a4) => a4.column !== filter2.column));
+          const filterColumns = appliedFilter.filter((c3) => c3.column !== filter2.column);
+          onChangeFilters(filterColumns);
+        },
+        children: /* @__PURE__ */ jsx(Icons, {
+          name: "close-icon"
+        })
+      })]
+    }))
+  });
+};
 const groupArray = (array, key) => {
   return array.reduce((acc, item) => {
     const group2 = item[key];
@@ -95464,21 +95580,22 @@ const GlobalFilters = ({
   onApply,
   companyId,
   renderAdditionalHeaderContent,
-  externalDashboardId,
-  appliedfilters: appliedfilters2,
-  setAppliedFilters
+  externalDashboardId
 }) => {
+  const [appliedfilters2, setAppliedFilters] = useState([]);
+  const globalFilterRef = useRef(null);
   const [filterList, setFilterList] = useState([]);
   const resetFilters = () => {
+    var _a2;
     setAppliedFilters([]);
     onApply({
       tableName: "",
       filters: []
     });
+    (_a2 = globalFilterRef.current) == null ? void 0 : _a2.click();
   };
-  const handleSubmit = (e3) => {
-    e3.preventDefault();
-    const filterColumns = appliedfilters2.map((field2) => {
+  const onChangeFilters = (updatedFilters) => {
+    const filterColumns = updatedFilters.map((field2) => {
       const col = {
         column: field2.column,
         operator: field2.operator,
@@ -95501,6 +95618,12 @@ const GlobalFilters = ({
       filters: filterColumns
     });
   };
+  const handleSubmit = (e3) => {
+    var _a2;
+    e3.preventDefault();
+    onChangeFilters(appliedfilters2);
+    (_a2 = globalFilterRef.current) == null ? void 0 : _a2.click();
+  };
   const getSelectedOption = useCallback((col, type3) => {
     var _a2;
     const colValue = ((_a2 = appliedfilters2.find((filter2) => filter2.column === col)) == null ? void 0 : _a2.value) || "";
@@ -95547,148 +95670,183 @@ const GlobalFilters = ({
   useEffect(() => {
     if (filters2[0].columns.length) {
       setFilterList(filters2[0].columns.filter((col) => col.isDefault));
+    } else {
+      setAppliedFilters([]);
+      onApply({
+        tableName: filters2[0].tableName,
+        filters: []
+      });
     }
   }, [filters2]);
+  useEffect(() => {
+    setAppliedFilters([]);
+    onApply({
+      tableName: filters2[0].tableName,
+      filters: []
+    });
+  }, [externalDashboardId]);
   return /* @__PURE__ */ jsx(Fragment, {
-    children: (data == null ? void 0 : data.companyIntegrations.length) && !isLoading && /* @__PURE__ */ jsx("div", {
-      className: styles$s.container,
-      children: /* @__PURE__ */ jsxs("form", {
-        className: styles$s.form,
-        onSubmit: handleSubmit,
-        onReset: resetFilters,
-        children: [/* @__PURE__ */ jsx("div", {
-          className: styles$s.filterHeader,
-          children: /* @__PURE__ */ jsxs("div", {
-            className: styles$s.titleContent,
-            children: [/* @__PURE__ */ jsx(Text, {
-              variant: "p",
-              styleClass: "primary",
-              className: styles$s.title,
-              children: "Filters"
-            }), renderAdditionalHeaderContent ? renderAdditionalHeaderContent() : null]
-          })
-        }), /* @__PURE__ */ jsx("div", {
-          className: styles$s.filterFields,
-          children: filterList.map((col) => {
-            var _a2, _b2;
-            return /* @__PURE__ */ jsx(Fragment, {
+    children: (data == null ? void 0 : data.companyIntegrations.length) && !isLoading && /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsx(PopoverMenu, {
+        button: /* @__PURE__ */ jsxs("div", {
+          className: styles$s.filterButton,
+          ref: globalFilterRef,
+          children: [/* @__PURE__ */ jsxs("div", {
+            className: styles$s.filterBtnText,
+            children: [/* @__PURE__ */ jsx(Icons, {
+              name: "filter-icon"
+            }), " Filters"]
+          }), appliedfilters2.length === 0 ? null : /* @__PURE__ */ jsx("span", {
+            className: styles$s.filterLength,
+            children: appliedfilters2.length
+          })]
+        }),
+        position: "bottom-left",
+        children: /* @__PURE__ */ jsx("div", {
+          className: styles$s.container,
+          children: /* @__PURE__ */ jsxs("form", {
+            className: styles$s.form,
+            onSubmit: handleSubmit,
+            onReset: resetFilters,
+            children: [/* @__PURE__ */ jsx("div", {
+              className: styles$s.filterHeader,
               children: /* @__PURE__ */ jsxs("div", {
-                className: styles$s.filterDropdown,
-                children: [col.as === "date" && /* @__PURE__ */ jsx(Fragment, {
-                  children: /* @__PURE__ */ jsx(DateRangePicker, {
-                    label: col.label || col.name,
-                    defaultValues: (_a2 = appliedfilters2.find((filter2) => filter2.column === col.name)) == null ? void 0 : _a2.defaultValues,
-                    onChange: (option2) => {
-                      if (option2)
-                        setAppliedFilters((prev) => {
-                          const isTimeStamp = col.as.toLowerCase() !== "date";
-                          const value = getTimeFilterValue({
-                            timeGrainValue: option2.value,
-                            isTimeStamp,
-                            col: getColumnString(col.name),
-                            database: integrationName
-                          });
-                          const field2 = {
-                            column: col.name,
-                            operator: "=",
-                            value,
-                            as: col.as,
-                            defaultValues: option2
-                          };
-                          const index2 = prev.findIndex((f2) => f2.column === col.name);
-                          if (index2 === -1)
-                            return [...prev, field2];
-                          const updated = [...prev];
-                          updated[index2] = field2;
-                          return updated;
-                        });
-                    }
+                className: styles$s.titleContent,
+                children: [/* @__PURE__ */ jsx(Text, {
+                  variant: "p",
+                  styleClass: "primary",
+                  className: styles$s.title,
+                  children: "Filters"
+                }), renderAdditionalHeaderContent ? renderAdditionalHeaderContent() : null]
+              })
+            }), /* @__PURE__ */ jsx("div", {
+              className: styles$s.filterFields,
+              children: filterList.map((col) => {
+                var _a2, _b2;
+                return /* @__PURE__ */ jsx(Fragment, {
+                  children: /* @__PURE__ */ jsxs("div", {
+                    className: styles$s.filterDropdown,
+                    children: [col.as === "date" && /* @__PURE__ */ jsx(Fragment, {
+                      children: /* @__PURE__ */ jsx(DateRangePicker, {
+                        label: col.label || col.name,
+                        defaultValues: (_a2 = appliedfilters2.find((filter2) => filter2.column === col.name)) == null ? void 0 : _a2.defaultValues,
+                        onChange: (option2) => {
+                          if (option2)
+                            setAppliedFilters((prev) => {
+                              const isTimeStamp = col.as.toLowerCase() !== "date";
+                              const value = getTimeFilterValue({
+                                timeGrainValue: option2.value,
+                                isTimeStamp,
+                                col: getColumnString(col.name),
+                                database: integrationName
+                              });
+                              const field2 = {
+                                column: col.name,
+                                operator: "=",
+                                value,
+                                as: col.as,
+                                defaultValues: option2
+                              };
+                              const index2 = prev.findIndex((f2) => f2.column === col.name);
+                              if (index2 === -1)
+                                return [...prev, field2];
+                              const updated = [...prev];
+                              updated[index2] = field2;
+                              return updated;
+                            });
+                        }
+                      })
+                    }), col.as === "number" && /* @__PURE__ */ jsx(NumberFilterField, {
+                      setAppliedFilters,
+                      column: col,
+                      defaultValues: (_b2 = appliedfilters2.find((filter2) => filter2.column === col.name)) == null ? void 0 : _b2.defaultValues
+                    }), col.as === "string" && /* @__PURE__ */ jsx(MultiFilterDropdown, {
+                      filter: {
+                        tableName: filters2[0].tableName,
+                        columnName: col.name
+                      },
+                      companyId,
+                      selectedOptions: getSelectedOption(col.name, "string") || [],
+                      autoSelected: false,
+                      onChange: (options2) => setAppliedFilters((prev) => {
+                        const field2 = {
+                          column: col.name,
+                          operator: "IN",
+                          value: options2.map((v4) => v4.value),
+                          as: col.as
+                        };
+                        const index2 = prev.findIndex((f2) => f2.column === col.name);
+                        if (index2 === -1)
+                          return [...prev, field2];
+                        const updated = [...prev];
+                        updated[index2] = field2;
+                        return updated;
+                      }),
+                      isSearchEnabled: true,
+                      integrationId,
+                      integrationName,
+                      label: col.label || col.name
+                    }), col.as === "default" || col.as === "boolean" ? /* @__PURE__ */ jsx(FilterDropDown, {
+                      filter: {
+                        tableName: filters2[0].tableName,
+                        columnName: col.name
+                      },
+                      companyId,
+                      selectedOption: getSelectedOption(col.name, "boolean"),
+                      autoSelected: false,
+                      onChange: (option2) => setAppliedFilters((prev) => {
+                        const field2 = {
+                          column: col.name,
+                          operator: "=",
+                          value: option2.value,
+                          as: col.as
+                        };
+                        const index2 = prev.findIndex((f2) => f2.column === col.name);
+                        if (index2 === -1)
+                          return [...prev, field2];
+                        const updated = [...prev];
+                        updated[index2] = field2;
+                        return updated;
+                      }),
+                      isSearchEnabled: true,
+                      integrationId,
+                      integrationName,
+                      label: col.label || col.name
+                    }) : null]
                   })
-                }), col.as === "number" && /* @__PURE__ */ jsx(NumberFilterField, {
-                  setAppliedFilters,
-                  column: col,
-                  defaultValues: (_b2 = appliedfilters2.find((filter2) => filter2.column === col.name)) == null ? void 0 : _b2.defaultValues
-                }), col.as === "string" && /* @__PURE__ */ jsx(MultiFilterDropdown, {
-                  filter: {
-                    tableName: filters2[0].tableName,
-                    columnName: col.name
-                  },
-                  companyId,
-                  selectedOptions: getSelectedOption(col.name, "string") || [],
-                  autoSelected: false,
-                  onChange: (options2) => setAppliedFilters((prev) => {
-                    const field2 = {
-                      column: col.name,
-                      operator: "IN",
-                      value: options2.map((v4) => v4.value),
-                      as: col.as
-                    };
-                    const index2 = prev.findIndex((f2) => f2.column === col.name);
-                    if (index2 === -1)
-                      return [...prev, field2];
-                    const updated = [...prev];
-                    updated[index2] = field2;
-                    return updated;
-                  }),
-                  isSearchEnabled: true,
-                  integrationId,
-                  integrationName,
-                  label: col.label || col.name
-                }), col.as === "default" || col.as === "boolean" ? /* @__PURE__ */ jsx(FilterDropDown, {
-                  filter: {
-                    tableName: filters2[0].tableName,
-                    columnName: col.name
-                  },
-                  companyId,
-                  selectedOption: getSelectedOption(col.name, "boolean"),
-                  autoSelected: false,
-                  onChange: (option2) => setAppliedFilters((prev) => {
-                    const field2 = {
-                      column: col.name,
-                      operator: "=",
-                      value: option2.value,
-                      as: col.as
-                    };
-                    const index2 = prev.findIndex((f2) => f2.column === col.name);
-                    if (index2 === -1)
-                      return [...prev, field2];
-                    const updated = [...prev];
-                    updated[index2] = field2;
-                    return updated;
-                  }),
-                  isSearchEnabled: true,
-                  integrationId,
-                  integrationName,
-                  label: col.label || col.name
-                }) : null]
+                });
               })
-            });
-          })
-        }), /* @__PURE__ */ jsx("div", {
-          className: styles$s.AddFilter,
-          children: /* @__PURE__ */ jsx(AddFilter, {
-            columnList: filters2[0].columns.filter((col) => !col.isDefault),
-            setFilterList,
-            filterList
+            }), /* @__PURE__ */ jsx("div", {
+              className: styles$s.AddFilter,
+              children: /* @__PURE__ */ jsx(AddFilter, {
+                columnList: filters2[0].columns.filter((col) => !col.isDefault),
+                setFilterList,
+                filterList
+              })
+            }), /* @__PURE__ */ jsxs("div", {
+              className: styles$s.buttons,
+              children: [/* @__PURE__ */ jsxs(Button, {
+                type: "reset",
+                variant: "secondary",
+                className: styles$s.reset,
+                children: [/* @__PURE__ */ jsx(Icons, {
+                  name: "reset-icon",
+                  className: styles$s.applyIcon
+                }), " ", "Reset Filters"]
+              }), /* @__PURE__ */ jsx(Button, {
+                type: "submit",
+                variant: "primary",
+                className: styles$s.apply,
+                children: "Apply"
+              })]
+            })]
           })
-        }), /* @__PURE__ */ jsxs("div", {
-          className: styles$s.buttons,
-          children: [/* @__PURE__ */ jsxs(Button, {
-            type: "reset",
-            variant: "secondary",
-            className: styles$s.reset,
-            children: [/* @__PURE__ */ jsx(Icons, {
-              name: "reset-icon",
-              className: styles$s.applyIcon
-            }), " Reset Filters"]
-          }), /* @__PURE__ */ jsx(Button, {
-            type: "submit",
-            variant: "primary",
-            className: styles$s.apply,
-            children: "Apply"
-          })]
-        })]
-      })
+        })
+      }), /* @__PURE__ */ jsx(AppliedFilter, {
+        appliedFilter: appliedfilters2,
+        setAppliedFilters,
+        onChangeFilters: (updatedFilters) => onChangeFilters(updatedFilters)
+      })]
     })
   });
 };
@@ -130166,60 +130324,60 @@ var styles$b = {
   "alt-container": "_alt-container_170un_49",
   fullscreen: fullscreen$2
 };
-const cardContainer = "_cardContainer_pprak_1";
-const listHeader = "_listHeader_pprak_9";
-const metricName = "_metricName_pprak_17";
-const metricTitle = "_metricTitle_pprak_25";
-const metricDescription = "_metricDescription_pprak_33";
-const popup = "_popup_pprak_41";
-const metricFilter$1 = "_metricFilter_pprak_49";
-const popupIcon = "_popupIcon_pprak_57";
-const popupMenu = "_popupMenu_pprak_65";
-const popupItem = "_popupItem_pprak_73";
-const popupItemIcon = "_popupItemIcon_pprak_81";
-const csvBtn = "_csvBtn_pprak_89";
-const deleteBtn = "_deleteBtn_pprak_97";
-const metricData = "_metricData_pprak_105";
-const metricTable = "_metricTable_pprak_113";
-const singleValueData = "_singleValueData_pprak_121";
-const singleValue = "_singleValue_pprak_121";
-const noData = "_noData_pprak_137";
-const noDataContent = "_noDataContent_pprak_145";
-const noDataText = "_noDataText_pprak_153";
-const loading$1 = "_loading_pprak_161";
-const features = "_features_pprak_169";
-const fullscreen$1 = "_fullscreen_pprak_177";
-const deleteModal = "_deleteModal_pprak_185";
-const cancelBtn = "_cancelBtn_pprak_193";
-const warningIcon = "_warningIcon_pprak_201";
-const downloadCsv = "_downloadCsv_pprak_209";
-const downloadCsvWrapper = "_downloadCsvWrapper_pprak_217";
-const downloadCsvHeader = "_downloadCsvHeader_pprak_225";
-const downloadCsvFooter = "_downloadCsvFooter_pprak_233";
-const downloadCsvCancelBtn = "_downloadCsvCancelBtn_pprak_241";
-const downloadCsvDisableBtn = "_downloadCsvDisableBtn_pprak_247";
-const downloadCsvNote = "_downloadCsvNote_pprak_253";
-const downloadCsvExpiredNote = "_downloadCsvExpiredNote_pprak_261";
-const downloadCsvNoteText = "_downloadCsvNoteText_pprak_267";
-const downloadCsvSuccessNote = "_downloadCsvSuccessNote_pprak_273";
-const downloadCsvSuccessText = "_downloadCsvSuccessText_pprak_279";
-const downloadUrlTimeline = "_downloadUrlTimeline_pprak_301";
-const timeLineItem = "_timeLineItem_pprak_309";
-const timeLineActiveIcon = "_timeLineActiveIcon_pprak_317";
-const timeLineIcon = "_timeLineIcon_pprak_325";
-const timeLineItemline = "_timeLineItemline_pprak_333";
-const downloadCsvLoading = "_downloadCsvLoading_pprak_341";
-const downloadCsvLoadingIcon = "_downloadCsvLoadingIcon_pprak_349";
-const downloadCsvLoadingText = "_downloadCsvLoadingText_pprak_357";
-const timeLineCheckedIcon = "_timeLineCheckedIcon_pprak_365";
-const timeLineCheckedIconWrapper = "_timeLineCheckedIconWrapper_pprak_373";
-const downloadCsvBackBtnWrapper = "_downloadCsvBackBtnWrapper_pprak_381";
-const downloadCsvBackBtnText = "_downloadCsvBackBtnText_pprak_389";
-const downloadCsvHeaderText = "_downloadCsvHeaderText_pprak_411";
-const downloadCsvTabContainer = "_downloadCsvTabContainer_pprak_419";
-const downloadCsvActiveTab = "_downloadCsvActiveTab_pprak_427";
-const downloadCsvTab = "_downloadCsvTab_pprak_419";
-const downloadCsvActiveTabText = "_downloadCsvActiveTabText_pprak_443";
+const cardContainer = "_cardContainer_sacr7_1";
+const listHeader = "_listHeader_sacr7_9";
+const metricName = "_metricName_sacr7_17";
+const metricTitle = "_metricTitle_sacr7_25";
+const metricDescription = "_metricDescription_sacr7_33";
+const popup = "_popup_sacr7_41";
+const metricFilter$1 = "_metricFilter_sacr7_49";
+const popupIcon = "_popupIcon_sacr7_57";
+const popupMenu = "_popupMenu_sacr7_65";
+const popupItem = "_popupItem_sacr7_73";
+const popupItemIcon = "_popupItemIcon_sacr7_81";
+const csvBtn = "_csvBtn_sacr7_89";
+const deleteBtn = "_deleteBtn_sacr7_97";
+const metricData = "_metricData_sacr7_105";
+const metricTable = "_metricTable_sacr7_113";
+const singleValueData = "_singleValueData_sacr7_121";
+const singleValue = "_singleValue_sacr7_121";
+const noData = "_noData_sacr7_137";
+const noDataContent = "_noDataContent_sacr7_145";
+const noDataText = "_noDataText_sacr7_153";
+const loading$1 = "_loading_sacr7_161";
+const features = "_features_sacr7_169";
+const fullscreen$1 = "_fullscreen_sacr7_177";
+const deleteModal = "_deleteModal_sacr7_185";
+const cancelBtn = "_cancelBtn_sacr7_193";
+const warningIcon = "_warningIcon_sacr7_201";
+const downloadCsv = "_downloadCsv_sacr7_209";
+const downloadCsvWrapper = "_downloadCsvWrapper_sacr7_217";
+const downloadCsvHeader = "_downloadCsvHeader_sacr7_225";
+const downloadCsvFooter = "_downloadCsvFooter_sacr7_233";
+const downloadCsvCancelBtn = "_downloadCsvCancelBtn_sacr7_241";
+const downloadCsvDisableBtn = "_downloadCsvDisableBtn_sacr7_247";
+const downloadCsvNote = "_downloadCsvNote_sacr7_253";
+const downloadCsvExpiredNote = "_downloadCsvExpiredNote_sacr7_261";
+const downloadCsvNoteText = "_downloadCsvNoteText_sacr7_267";
+const downloadCsvSuccessNote = "_downloadCsvSuccessNote_sacr7_273";
+const downloadCsvSuccessText = "_downloadCsvSuccessText_sacr7_279";
+const downloadUrlTimeline = "_downloadUrlTimeline_sacr7_301";
+const timeLineItem = "_timeLineItem_sacr7_309";
+const timeLineActiveIcon = "_timeLineActiveIcon_sacr7_317";
+const timeLineIcon = "_timeLineIcon_sacr7_325";
+const timeLineItemline = "_timeLineItemline_sacr7_333";
+const downloadCsvLoading = "_downloadCsvLoading_sacr7_341";
+const downloadCsvLoadingIcon = "_downloadCsvLoadingIcon_sacr7_349";
+const downloadCsvLoadingText = "_downloadCsvLoadingText_sacr7_357";
+const timeLineCheckedIcon = "_timeLineCheckedIcon_sacr7_365";
+const timeLineCheckedIconWrapper = "_timeLineCheckedIconWrapper_sacr7_373";
+const downloadCsvBackBtnWrapper = "_downloadCsvBackBtnWrapper_sacr7_381";
+const downloadCsvBackBtnText = "_downloadCsvBackBtnText_sacr7_389";
+const downloadCsvHeaderText = "_downloadCsvHeaderText_sacr7_411";
+const downloadCsvTabContainer = "_downloadCsvTabContainer_sacr7_419";
+const downloadCsvActiveTab = "_downloadCsvActiveTab_sacr7_427";
+const downloadCsvTab = "_downloadCsvTab_sacr7_419";
+const downloadCsvActiveTabText = "_downloadCsvActiveTabText_sacr7_443";
 var styles$a = {
   cardContainer,
   listHeader,
@@ -130258,8 +130416,8 @@ var styles$a = {
   downloadCsvNoteText,
   downloadCsvSuccessNote,
   downloadCsvSuccessText,
-  "tab-border-bottom": "_tab-border-bottom_pprak_285",
-  "download-info-text": "_download-info-text_pprak_293",
+  "tab-border-bottom": "_tab-border-bottom_sacr7_285",
+  "download-info-text": "_download-info-text_sacr7_293",
   downloadUrlTimeline,
   timeLineItem,
   timeLineActiveIcon,
@@ -132613,65 +132771,6 @@ const MetricTable = ({
     })]
   });
 };
-const AppliedFilter = ({
-  appliedFilter,
-  setAppliedFilters,
-  onRemove
-}) => {
-  return /* @__PURE__ */ jsx("div", {
-    className: styles$s.appliedfilters,
-    children: appliedFilter.map((filter2) => /* @__PURE__ */ jsxs("div", {
-      className: styles$s.appliedFilterTag,
-      children: [/* @__PURE__ */ jsx(Text, {
-        variant: "p",
-        styleClass: "font-14",
-        className: styles$s.textBold,
-        children: filter2.column
-      }), /* @__PURE__ */ jsx(Text, {
-        variant: "p",
-        styleClass: "font-14",
-        children: "is"
-      }), filter2.as !== "string" && filter2.as !== "boolean" && filter2.as !== "default" && /* @__PURE__ */ jsx(Text, {
-        variant: "p",
-        styleClass: "font-14",
-        children: "between"
-      }), /* @__PURE__ */ jsx(Text, {
-        variant: "p",
-        styleClass: "font-14",
-        className: styles$s.textBold,
-        children: Array.isArray(filter2.value) ? filter2.as === "string" ? filter2.value.join(", ") : filter2.value.join(" & ") : typeof filter2.value === "string" && filter2.as === "number" ? filter2.value.replace("AND", "&") : typeof filter2.value === "string" && filter2.as === "date" ? filter2.value.split(" ").slice(2).join(" ").replace("AND", "&") : filter2.value
-      }), /* @__PURE__ */ jsx(Button, {
-        variant: "secondary",
-        type: "button",
-        onClick: () => {
-          setAppliedFilters((prev) => prev.filter((a4) => a4.column !== filter2.column));
-          const filterColumns = appliedFilter.filter((c3) => c3.column !== filter2.column).map((field2) => {
-            const col = {
-              column: field2.column,
-              operator: field2.operator,
-              as: field2.as
-            };
-            const formattedValue = field2.as === "date" || field2.as === "number" ? field2.value : getFormattedFilterValue({
-              operator: field2.operator,
-              value: field2.value
-            });
-            if (formattedValue != null) {
-              Object.assign(col, {
-                ...col,
-                value: formattedValue
-              });
-            }
-            return col;
-          });
-          onRemove(filterColumns);
-        },
-        children: /* @__PURE__ */ jsx(Icons, {
-          name: "close-icon"
-        })
-      })]
-    }))
-  });
-};
 var index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   Button,
@@ -133329,7 +133428,6 @@ const EmbeddedDashboard = e__default.memo(({
     data,
     isLoading
   } = useDashboardContext();
-  const [appliedfilters2, setAppliedFilters] = useState([]);
   const [isShowMetricCreateModal, setShowMetricCreateModal] = useState(false);
   const [globalFilters, setGlobalFilters] = useState({
     tableName: "",
@@ -133351,7 +133449,6 @@ const EmbeddedDashboard = e__default.memo(({
     return [adminThemeData == null ? void 0 : adminThemeData.themes[0], colors2];
   }, [adminThemeData == null ? void 0 : adminThemeData.themes[0]]);
   useApplyAdminTheme(adminTheme);
-  const globalFilterRef = useRef(null);
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsxs("div", {
       className: styles$M["embedDashboard-container"],
@@ -133392,46 +133489,13 @@ const EmbeddedDashboard = e__default.memo(({
           })]
         }), /* @__PURE__ */ jsxs("div", {
           className: styles$M["embedDashboard-wrapper"],
-          children: [data.externalDashboard.filters.length ? /* @__PURE__ */ jsxs(Fragment, {
-            children: [/* @__PURE__ */ jsx(PopoverMenu, {
-              button: /* @__PURE__ */ jsxs("div", {
-                className: styles$M.filterButton,
-                ref: globalFilterRef,
-                children: [/* @__PURE__ */ jsxs("div", {
-                  className: styles$M.filterText,
-                  children: [/* @__PURE__ */ jsx(Icons, {
-                    name: "filter-icon"
-                  }), " Filters"]
-                }), appliedfilters2.length === 0 ? /* @__PURE__ */ jsx("div", {}) : /* @__PURE__ */ jsx("span", {
-                  className: styles$M.filterLength,
-                  children: appliedfilters2.length
-                })]
-              }),
-              menuClass: "w-[400px] ml-[40px]",
-              position: "bottom-left",
-              children: /* @__PURE__ */ jsx(GlobalFilters, {
-                companyId: data.companyId,
-                externalDashboardId: data.externalDashboard.id,
-                filters: data.externalDashboard.filters,
-                onApply: (values) => {
-                  var _a3;
-                  setGlobalFilters(values);
-                  (_a3 = globalFilterRef.current) == null ? void 0 : _a3.click();
-                },
-                appliedfilters: appliedfilters2,
-                setAppliedFilters
-              })
-            }), /* @__PURE__ */ jsx(AppliedFilter, {
-              appliedFilter: appliedfilters2,
-              setAppliedFilters,
-              onRemove: (filters2) => {
-                var _a3, _b3;
-                return setGlobalFilters({
-                  tableName: (_b3 = (_a3 = data.externalDashboard) == null ? void 0 : _a3.filters) == null ? void 0 : _b3[0].tableName,
-                  filters: filters2
-                });
-              }
-            })]
+          children: [data.externalDashboard.filters.length ? /* @__PURE__ */ jsx(GlobalFilters, {
+            companyId: data.companyId,
+            externalDashboardId: data.externalDashboard.id,
+            filters: data.externalDashboard.filters,
+            onApply: (values) => {
+              setGlobalFilters(values);
+            }
           }) : null, /* @__PURE__ */ jsx(ExternalMetricList, {
             client: data.clientId,
             isLiveMode: data.isLiveMode,