@databrainhq/plugin 0.9.10 → 0.9.12

package/dist/index.es.js

@@ -4961,7 +4961,7 @@ const leave$2 = "_leave_ib5g4_85";
 const leaveFrom$2 = "_leaveFrom_ib5g4_91";
 const leaveTo$2 = "_leaveTo_ib5g4_97";
 const notAvailable = "_notAvailable_ib5g4_103";
-const option$1 = "_option_ib5g4_109";
+const option$2 = "_option_ib5g4_109";
 const activeOption = "_activeOption_ib5g4_115";
 const optionSelected = "_optionSelected_ib5g4_121";
 const inactiveOption = "_inactiveOption_ib5g4_127";
@@ -4997,7 +4997,7 @@ var style = {
   leaveFrom: leaveFrom$2,
   leaveTo: leaveTo$2,
   notAvailable,
-  option: option$1,
+  option: option$2,
   activeOption,
   optionSelected,
   inactiveOption,
@@ -5806,13 +5806,13 @@ const ChartConfig = ({
       }), /* @__PURE__ */ jsxs("form", {
         onSubmit: handleSubmit(onSubmitOptions),
         className: styles$K.form,
-        children: [["funnel", "guage", "boxplot", "table"].includes(chartType2) ? /* @__PURE__ */ jsx(Select, {
+        children: [["funnel", "guage", "boxplot"].includes(chartType2) ? /* @__PURE__ */ jsx(Select, {
           label: "Measure",
           options: options2,
           onChange: setMeasure,
           value: measure
         }) : /* @__PURE__ */ jsx(HookMultiSelect, {
-          label: chartType2 === "row" ? "X-axis" : "Y-axis",
+          label: chartType2 === "row" ? "X-axis" : chartType2 === "table" ? "Measure" : "Y-axis",
           name: "yAxisList",
           options: options2,
           defaultValue: options2.map((option2) => option2.value),
@@ -7324,8 +7324,8 @@ const floatingText = "_floatingText_u60ky_39";
 const normalText = "_normalText_u60ky_47";
 const dropdown$1 = "_dropdown_u60ky_55";
 const options$1 = "_options_u60ky_63";
-const checkedOption$1 = "_checkedOption_u60ky_71";
-const option = "_option_u60ky_63";
+const checkedOption$2 = "_checkedOption_u60ky_71";
+const option$1 = "_option_u60ky_63";
 const icon$1 = "_icon_u60ky_87";
 const text$2 = "_text_u60ky_95";
 const search = "_search_u60ky_103";
@@ -7342,8 +7342,8 @@ var styles$z = {
   normalText,
   dropdown: dropdown$1,
   options: options$1,
-  checkedOption: checkedOption$1,
-  option,
+  checkedOption: checkedOption$2,
+  option: option$1,
   icon: icon$1,
   text: text$2,
   search,
@@ -86704,27 +86704,38 @@ const FilterField = ({
     })
   });
 };
-const container$9 = "_container_dkf3r_1";
-const form$1 = "_form_dkf3r_7";
-const filterHeader = "_filterHeader_dkf3r_13";
-const titleContent = "_titleContent_dkf3r_19";
-const title = "_title_dkf3r_19";
-const buttons = "_buttons_dkf3r_31";
-const apply = "_apply_dkf3r_37";
-const applyIcon = "_applyIcon_dkf3r_43";
-const reset = "_reset_dkf3r_49";
-const filterFields = "_filterFields_dkf3r_55";
-const filterDropdown$1 = "_filterDropdown_dkf3r_61";
-const filters = "_filters_dkf3r_67";
-const filterItem = "_filterItem_dkf3r_73";
-const filterItemOperator = "_filterItemOperator_dkf3r_79";
-const remove = "_remove_dkf3r_85";
-const filterCol = "_filterCol_dkf3r_91";
-const filterText = "_filterText_dkf3r_97";
-const smallText = "_smallText_dkf3r_103";
-const numberField = "_numberField_dkf3r_111";
-const numberFieldWrapper = "_numberFieldWrapper_dkf3r_119";
-const numberFieldLabel = "_numberFieldLabel_dkf3r_127";
+const container$9 = "_container_13zds_1";
+const form$1 = "_form_13zds_7";
+const filterHeader = "_filterHeader_13zds_13";
+const titleContent = "_titleContent_13zds_19";
+const title = "_title_13zds_19";
+const buttons = "_buttons_13zds_31";
+const apply = "_apply_13zds_37";
+const applyIcon = "_applyIcon_13zds_43";
+const reset = "_reset_13zds_49";
+const filterFields = "_filterFields_13zds_55";
+const AddFilter$1 = "_AddFilter_13zds_61";
+const filterDropdown$1 = "_filterDropdown_13zds_67";
+const filters = "_filters_13zds_73";
+const filterItem = "_filterItem_13zds_79";
+const filterItemOperator = "_filterItemOperator_13zds_85";
+const remove = "_remove_13zds_91";
+const filterCol = "_filterCol_13zds_97";
+const filterText = "_filterText_13zds_103";
+const smallText = "_smallText_13zds_109";
+const numberField = "_numberField_13zds_117";
+const numberFieldWrapper = "_numberFieldWrapper_13zds_125";
+const numberFieldLabel = "_numberFieldLabel_13zds_133";
+const numberFieldLabelText = "_numberFieldLabelText_13zds_141";
+const numberFieldLabelSelectText = "_numberFieldLabelSelectText_13zds_149";
+const numberFieldButtonClass = "_numberFieldButtonClass_13zds_157";
+const numberFieldLabelMenuClass = "_numberFieldLabelMenuClass_13zds_165";
+const checkedOption$1 = "_checkedOption_13zds_173";
+const option = "_option_13zds_181";
+const addFilterMenu = "_addFilterMenu_13zds_189";
+const appliedFilterTag = "_appliedFilterTag_13zds_197";
+const appliedfilters = "_appliedfilters_13zds_205";
+const textBold = "_textBold_13zds_213";
 var styles$s = {
   container: container$9,
   form: form$1,
@@ -86736,6 +86747,7 @@ var styles$s = {
   applyIcon,
   reset,
   filterFields,
+  AddFilter: AddFilter$1,
   filterDropdown: filterDropdown$1,
   filters,
   filterItem,
@@ -86746,7 +86758,150 @@ var styles$s = {
   smallText,
   numberField,
   numberFieldWrapper,
-  numberFieldLabel
+  numberFieldLabel,
+  numberFieldLabelText,
+  numberFieldLabelSelectText,
+  numberFieldButtonClass,
+  numberFieldLabelMenuClass,
+  checkedOption: checkedOption$1,
+  option,
+  addFilterMenu,
+  appliedFilterTag,
+  appliedfilters,
+  textBold
+};
+const NumberFilterField = ({
+  setAppliedFilters,
+  column: column2,
+  defaultValues
+}) => {
+  const [minMax, setMinMax] = useState(defaultValues || {
+    min: 0,
+    max: 1e6
+  });
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: /* @__PURE__ */ jsx(PopoverMenu, {
+      menuClass: styles$s.numberFieldLabelMenuClass,
+      button: /* @__PURE__ */ jsxs("div", {
+        className: styles$s.numberField,
+        children: [/* @__PURE__ */ jsxs("div", {
+          className: styles$s.numberFieldLabelText,
+          children: [/* @__PURE__ */ jsx(Text, {
+            variant: "p",
+            styleClass: "font-14",
+            className: styles$s.numberFieldLabel,
+            children: column2.label || column2.name
+          }), /* @__PURE__ */ jsx(Text, {
+            variant: "p",
+            styleClass: "font-14",
+            className: styles$s.numberFieldLabelSelectText,
+            children: "Select an option"
+          })]
+        }), /* @__PURE__ */ jsx(materialSymbolsKeyboardArrowDown, {})]
+      }),
+      buttonClass: styles$s.numberFieldButtonClass,
+      children: /* @__PURE__ */ jsxs("div", {
+        className: styles$s.numberFieldWrapper,
+        children: [/* @__PURE__ */ jsx(InputField, {
+          label: "minimum",
+          type: "number",
+          value: minMax.min,
+          onChange: ({
+            target: {
+              value
+            }
+          }) => {
+            setMinMax((prev) => ({
+              ...prev,
+              min: Number(value)
+            }));
+            setAppliedFilters((prev) => {
+              const field2 = {
+                column: column2.name,
+                operator: "BETWEEN",
+                value: `${value} AND ${minMax.max}`,
+                as: column2.as,
+                defaultValues: {
+                  min: Number(value),
+                  max: minMax.max
+                }
+              };
+              const index2 = prev.findIndex((f2) => f2.column === column2.name);
+              if (index2 === -1)
+                return [...prev, field2];
+              const updated = [...prev];
+              updated[index2] = field2;
+              return updated;
+            });
+          }
+        }), /* @__PURE__ */ jsx(InputField, {
+          label: "maximum",
+          type: "number",
+          value: minMax.max,
+          onChange: ({
+            target: {
+              value
+            }
+          }) => {
+            setMinMax((prev) => ({
+              ...prev,
+              max: Number(value)
+            }));
+            setAppliedFilters((prev) => {
+              const field2 = {
+                column: column2.name,
+                operator: "BETWEEN",
+                value: `${minMax.min} AND ${value}`,
+                as: column2.as,
+                defaultValues: {
+                  max: Number(value),
+                  min: minMax.min
+                }
+              };
+              const index2 = prev.findIndex((f2) => f2.column === column2.name);
+              if (index2 === -1)
+                return [...prev, field2];
+              const updated = [...prev];
+              updated[index2] = field2;
+              return updated;
+            });
+          }
+        })]
+      })
+    })
+  });
+};
+const AddFilter = ({
+  columnList,
+  filterList,
+  setFilterList
+}) => {
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: !!columnList.length && /* @__PURE__ */ jsx(PopoverMenu, {
+      button: /* @__PURE__ */ jsx(Button, {
+        variant: "outlined",
+        type: "button",
+        size: "small",
+        children: "Add Filter"
+      }),
+      position: "bottom-left",
+      children: /* @__PURE__ */ jsx("div", {
+        className: styles$s.addFilterMenu,
+        children: columnList.map((col) => {
+          const isSelected = !!filterList.find((opt) => opt.name === col.name);
+          return /* @__PURE__ */ jsxs(Button, {
+            variant: "secondary",
+            onClick: () => {
+              const updatedOptions = isSelected ? filterList.filter((opt) => opt.name !== col.name) : [...filterList, col];
+              setFilterList(updatedOptions);
+            },
+            className: isSelected ? styles$s.checkedOption : styles$s.option,
+            children: [isSelected ? /* @__PURE__ */ jsx(materialSymbolsCheckBox, {}) : /* @__PURE__ */ jsx(materialSymbolsCheckBoxOutlineBlank, {}), col.label || col.name]
+          });
+        })
+      })
+    })
+  });
 };
 const groupArray = (array, key) => {
   return array.reduce((acc, item) => {
@@ -95063,20 +95218,20 @@ var zt = function(t3) {
   } }]), a4;
 }(), $t = "input", Gt = "navigate";
 var reactDatepicker = "";
-const datePickerContainer = "_datePickerContainer_10xj7_1";
-const buttonWrapper = "_buttonWrapper_10xj7_9";
-const datePickerCalendarWrapper = "_datePickerCalendarWrapper_10xj7_17";
-const label$1 = "_label_10xj7_25";
-const text = "_text_10xj7_31";
-const button$4 = "_button_10xj7_9";
-const datePickerCalContainer = "_datePickerCalContainer_10xj7_43";
-const datePickerOptionsWrapper = "_datePickerOptionsWrapper_10xj7_49";
-const datePickerOption = "_datePickerOption_10xj7_49";
-const datePickerCalendar = "_datePickerCalendar_10xj7_17";
-const datePickerCalendarHeader = "_datePickerCalendarHeader_10xj7_73";
-const checkedOption = "_checkedOption_10xj7_81";
-const datePickerCalFooter = "_datePickerCalFooter_10xj7_89";
-const dayClassName = "_dayClassName_10xj7_97";
+const datePickerContainer = "_datePickerContainer_1dons_1";
+const buttonWrapper = "_buttonWrapper_1dons_9";
+const datePickerCalendarWrapper = "_datePickerCalendarWrapper_1dons_17";
+const label$1 = "_label_1dons_25";
+const text = "_text_1dons_31";
+const button$4 = "_button_1dons_9";
+const datePickerCalContainer = "_datePickerCalContainer_1dons_43";
+const datePickerOptionsWrapper = "_datePickerOptionsWrapper_1dons_49";
+const datePickerOption = "_datePickerOption_1dons_49";
+const datePickerCalendar = "_datePickerCalendar_1dons_17";
+const datePickerCalendarHeader = "_datePickerCalendarHeader_1dons_73";
+const checkedOption = "_checkedOption_1dons_81";
+const datePickerCalFooter = "_datePickerCalFooter_1dons_89";
+const dayClassName = "_dayClassName_1dons_97";
 var styles$r = {
   datePickerContainer,
   buttonWrapper,
@@ -95146,12 +95301,12 @@ const options = [{
 }];
 const DateRangePicker = ({
   label: fieldLabel2,
-  setTimeGrainValue,
-  timeGrainValue,
-  onChange
+  onChange,
+  defaultValues
 }) => {
-  const [startDate, setStartDate] = useState(new Date());
-  const [endDate, setEndDate] = useState(new Date());
+  const [timeGrainValue, setTimeGrainValue] = useState((defaultValues == null ? void 0 : defaultValues.timeGrainValue) || "");
+  const [startDate, setStartDate] = useState(defaultValues == null ? void 0 : defaultValues.startDate);
+  const [endDate, setEndDate] = useState(defaultValues == null ? void 0 : defaultValues.endDate);
   const datePickerRef = useRef(null);
   const handleOptionClick = ({
     endOffset,
@@ -95186,9 +95341,18 @@ const DateRangePicker = ({
     (_a2 = datePickerRef.current) == null ? void 0 : _a2.click();
   };
   useEffect(() => {
-    const startDateFormat = startDate.toISOString().slice(0, 10);
-    const endDateFormat = endDate.toISOString().slice(0, 10);
-    onChange == null ? void 0 : onChange(`${startDateFormat} - ${endDateFormat}`);
+    const startDateFormat = startDate == null ? void 0 : startDate.toISOString().slice(0, 10);
+    const endDateFormat = endDate == null ? void 0 : endDate.toISOString().slice(0, 10);
+    if (startDateFormat && endDateFormat) {
+      onChange == null ? void 0 : onChange({
+        value: `${startDateFormat} - ${endDateFormat}`,
+        startDate,
+        endDate,
+        timeGrainValue
+      });
+    } else {
+      onChange == null ? void 0 : onChange(void 0);
+    }
   }, [startDate, endDate]);
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsx(PopoverMenu, {
@@ -95202,11 +95366,11 @@ const DateRangePicker = ({
           styleClass: "font-14",
           className: styles$r.label,
           children: fieldLabel2
-        }), /* @__PURE__ */ jsxs(Text, {
+        }), /* @__PURE__ */ jsx(Text, {
           variant: "p",
           styleClass: "font-14",
           className: styles$r.text,
-          children: [startDate.toDateString(), " - ", endDate.toDateString()]
+          children: startDate && endDate ? `${startDate.toDateString()} - ${endDate.toDateString()}` : "Select"
         }), /* @__PURE__ */ jsx(materialSymbolsKeyboardArrowDown, {})]
       }),
       children: /* @__PURE__ */ jsxs("div", {
@@ -95237,7 +95401,7 @@ const DateRangePicker = ({
               selected: startDate,
               onChange: (date) => {
                 const startDateFormat = date.toISOString().slice(0, 10);
-                const endDateFormat = endDate.toISOString().slice(0, 10);
+                const endDateFormat = endDate == null ? void 0 : endDate.toISOString().slice(0, 10);
                 setTimeGrainValue(`${startDateFormat} - ${endDateFormat}`);
                 setStartDate(date);
               },
@@ -95247,7 +95411,7 @@ const DateRangePicker = ({
             }), /* @__PURE__ */ jsx(zt, {
               selected: endDate,
               onChange: (date) => {
-                const startDateFormat = startDate.toISOString().slice(0, 10);
+                const startDateFormat = startDate == null ? void 0 : startDate.toISOString().slice(0, 10);
                 const endDateFormat = date.toISOString().slice(0, 10);
                 setTimeGrainValue(`${startDateFormat} - ${endDateFormat}`);
                 setEndDate(date);
@@ -95298,14 +95462,10 @@ const GlobalFilters = ({
   companyId,
   renderAdditionalHeaderContent,
   externalDashboardId,
-  appliedfilters,
+  appliedfilters: appliedfilters2,
   setAppliedFilters
 }) => {
-  const [timeGrainValue, setTimeGrainValue] = useState("");
-  const [minMax, setMinMax] = useState({
-    min: 100,
-    max: 1e3
-  });
+  const [filterList, setFilterList] = useState([]);
   const resetFilters = () => {
     setAppliedFilters([]);
     onApply({
@@ -95315,7 +95475,7 @@ const GlobalFilters = ({
   };
   const handleSubmit = (e3) => {
     e3.preventDefault();
-    const filterColumns = appliedfilters.map((field2) => {
+    const filterColumns = appliedfilters2.map((field2) => {
       const col = {
         column: field2.column,
         operator: field2.operator,
@@ -95338,14 +95498,23 @@ const GlobalFilters = ({
       filters: filterColumns
     });
   };
-  const getSelectedOption = useCallback((col) => {
+  const getSelectedOption = useCallback((col, type3) => {
     var _a2;
-    const colValue = ((_a2 = appliedfilters.find((filter2) => filter2.column === col)) == null ? void 0 : _a2.value) || "";
+    const colValue = ((_a2 = appliedfilters2.find((filter2) => filter2.column === col)) == null ? void 0 : _a2.value) || "";
+    if (type3 === "string") {
+      if (Array.isArray(colValue)) {
+        return colValue.map((v4) => ({
+          label: v4,
+          value: v4
+        }));
+      }
+      return [];
+    }
     return {
       label: colValue,
       value: colValue
     };
-  }, [appliedfilters]);
+  }, [appliedfilters2]);
   const {
     data,
     isLoading
@@ -95372,6 +95541,11 @@ const GlobalFilters = ({
       return `\`${name}\``;
     return `"${name}"`;
   };
+  useEffect(() => {
+    if (filters2[0].columns.length) {
+      setFilterList(filters2[0].columns.filter((col) => col.isDefault));
+    }
+  }, [filters2]);
   return /* @__PURE__ */ jsx(Fragment, {
     children: (data == null ? void 0 : data.companyIntegrations.length) && !isLoading && /* @__PURE__ */ jsx("div", {
       className: styles$s.container,
@@ -95392,98 +95566,31 @@ const GlobalFilters = ({
           })
         }), /* @__PURE__ */ jsx("div", {
           className: styles$s.filterFields,
-          children: filters2[0].columns.map((col) => /* @__PURE__ */ jsx(Fragment, {
-            children: /* @__PURE__ */ jsxs("div", {
-              className: styles$s.filterCol,
-              children: [/* @__PURE__ */ jsx("div", {
+          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: [col.as === "date" && /* @__PURE__ */ jsx(Fragment, {
                   children: /* @__PURE__ */ jsx(DateRangePicker, {
-                    label: col.name,
-                    setTimeGrainValue,
-                    timeGrainValue,
+                    label: col.label || col.name,
+                    defaultValues: (_a2 = appliedfilters2.find((filter2) => filter2.column === col.name)) == null ? void 0 : _a2.defaultValues,
                     onChange: (option2) => {
-                      setAppliedFilters((prev) => {
-                        const isTimeStamp = col.as.toLowerCase() !== "date";
-                        const value = getTimeFilterValue({
-                          timeGrainValue: option2,
-                          isTimeStamp,
-                          col: getColumnString(col.name),
-                          database: integrationName
-                        });
-                        const field2 = {
-                          column: col.name,
-                          operator: "=",
-                          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;
-                      });
-                    }
-                  })
-                }) : col.as === "number" ? /* @__PURE__ */ jsxs("div", {
-                  className: styles$s.numberField,
-                  children: [/* @__PURE__ */ jsx(Text, {
-                    styleClass: "custom",
-                    variant: "p",
-                    className: styles$s.numberFieldLabel,
-                    children: col.name
-                  }), /* @__PURE__ */ jsxs("div", {
-                    className: styles$s.numberFieldWrapper,
-                    children: [/* @__PURE__ */ jsx(InputField, {
-                      label: "min",
-                      labelVariant: "floating",
-                      type: "number",
-                      defaultValue: 0,
-                      onChange: ({
-                        target: {
-                          value
-                        }
-                      }) => {
-                        setMinMax((prev) => ({
-                          ...prev,
-                          min: Number(value)
-                        }));
-                        setAppliedFilters((prev) => {
-                          const field2 = {
-                            column: col.name,
-                            operator: "BETWEEN",
-                            value: `${value} AND ${minMax.max}`,
-                            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;
-                        });
-                      }
-                    }), /* @__PURE__ */ jsx(InputField, {
-                      label: "max",
-                      labelVariant: "floating",
-                      type: "number",
-                      defaultValue: 0,
-                      onChange: ({
-                        target: {
-                          value
-                        }
-                      }) => {
-                        setMinMax((prev) => ({
-                          ...prev,
-                          max: Number(value)
-                        }));
+                      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: "BETWEEN",
-                            value: `${minMax.min} AND ${value}`,
-                            as: col.as
+                            operator: "=",
+                            value,
+                            as: col.as,
+                            defaultValues: option2
                           };
                           const index2 = prev.findIndex((f2) => f2.column === col.name);
                           if (index2 === -1)
@@ -95492,22 +95599,52 @@ const GlobalFilters = ({
                           updated[index2] = field2;
                           return updated;
                         });
-                      }
-                    })]
-                  })]
-                }) : /* @__PURE__ */ jsx(FilterDropDown, {
+                    }
+                  })
+                }), 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),
+                  selectedOption: getSelectedOption(col.name, "boolean"),
                   autoSelected: false,
                   onChange: (option2) => setAppliedFilters((prev) => {
                     const field2 = {
                       column: col.name,
                       operator: "=",
-                      value: option2.value
+                      value: option2.value,
+                      as: col.as
                     };
                     const index2 = prev.findIndex((f2) => f2.column === col.name);
                     if (index2 === -1)
@@ -95518,21 +95655,19 @@ const GlobalFilters = ({
                   }),
                   isSearchEnabled: true,
                   integrationId,
-                  integrationName
-                })
-              }), /* @__PURE__ */ jsx(Button, {
-                type: "button",
-                variant: "custom",
-                className: styles$s.remove,
-                onClick: () => {
-                  setAppliedFilters((prev) => prev.filter((a4) => a4.column !== col.name));
-                },
-                children: /* @__PURE__ */ jsx(Icons, {
-                  name: "delete-icon"
-                })
-              })]
-            })
-          }))
+                  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__ */ jsxs("div", {
           className: styles$s.buttons,
           children: [/* @__PURE__ */ jsxs(Button, {
@@ -130028,57 +130163,60 @@ var styles$b = {
   "alt-container": "_alt-container_170un_49",
   fullscreen: fullscreen$2
 };
-const cardContainer = "_cardContainer_1qrhu_1";
-const listHeader = "_listHeader_1qrhu_9";
-const metricName = "_metricName_1qrhu_17";
-const metricTitle = "_metricTitle_1qrhu_25";
-const metricDescription = "_metricDescription_1qrhu_33";
-const popup = "_popup_1qrhu_41";
-const metricFilter$1 = "_metricFilter_1qrhu_49";
-const popupIcon = "_popupIcon_1qrhu_57";
-const popupMenu = "_popupMenu_1qrhu_65";
-const popupItem = "_popupItem_1qrhu_73";
-const popupItemIcon = "_popupItemIcon_1qrhu_81";
-const csvBtn = "_csvBtn_1qrhu_89";
-const deleteBtn = "_deleteBtn_1qrhu_97";
-const metricData = "_metricData_1qrhu_105";
-const metricTable = "_metricTable_1qrhu_113";
-const singleValueData = "_singleValueData_1qrhu_121";
-const singleValue = "_singleValue_1qrhu_121";
-const noData = "_noData_1qrhu_137";
-const noDataContent = "_noDataContent_1qrhu_145";
-const noDataText = "_noDataText_1qrhu_153";
-const loading$1 = "_loading_1qrhu_161";
-const features = "_features_1qrhu_169";
-const fullscreen$1 = "_fullscreen_1qrhu_177";
-const deleteModal = "_deleteModal_1qrhu_185";
-const cancelBtn = "_cancelBtn_1qrhu_193";
-const warningIcon = "_warningIcon_1qrhu_201";
-const downloadCsv = "_downloadCsv_1qrhu_209";
-const downloadCsvWrapper = "_downloadCsvWrapper_1qrhu_217";
-const downloadCsvHeader = "_downloadCsvHeader_1qrhu_225";
-const downloadCsvFooter = "_downloadCsvFooter_1qrhu_233";
-const downloadCsvCancelBtn = "_downloadCsvCancelBtn_1qrhu_241";
-const downloadCsvNote = "_downloadCsvNote_1qrhu_249";
-const downloadCsvExpiredNote = "_downloadCsvExpiredNote_1qrhu_257";
-const downloadCsvNoteText = "_downloadCsvNoteText_1qrhu_263";
-const downloadUrlTimeline = "_downloadUrlTimeline_1qrhu_287";
-const timeLineItem = "_timeLineItem_1qrhu_295";
-const timeLineActiveIcon = "_timeLineActiveIcon_1qrhu_303";
-const timeLineIcon = "_timeLineIcon_1qrhu_311";
-const timeLineItemline = "_timeLineItemline_1qrhu_319";
-const downloadCsvLoading = "_downloadCsvLoading_1qrhu_327";
-const downloadCsvLoadingIcon = "_downloadCsvLoadingIcon_1qrhu_335";
-const downloadCsvLoadingText = "_downloadCsvLoadingText_1qrhu_343";
-const timeLineCheckedIcon = "_timeLineCheckedIcon_1qrhu_351";
-const timeLineCheckedIconWrapper = "_timeLineCheckedIconWrapper_1qrhu_359";
-const downloadCsvBackBtnWrapper = "_downloadCsvBackBtnWrapper_1qrhu_367";
-const downloadCsvBackBtnText = "_downloadCsvBackBtnText_1qrhu_375";
-const downloadCsvHeaderText = "_downloadCsvHeaderText_1qrhu_397";
-const downloadCsvTabContainer = "_downloadCsvTabContainer_1qrhu_405";
-const downloadCsvActiveTab = "_downloadCsvActiveTab_1qrhu_413";
-const downloadCsvTab = "_downloadCsvTab_1qrhu_405";
-const downloadCsvActiveTabText = "_downloadCsvActiveTabText_1qrhu_429";
+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";
 var styles$a = {
   cardContainer,
   listHeader,
@@ -130111,11 +130249,14 @@ var styles$a = {
   downloadCsvHeader,
   downloadCsvFooter,
   downloadCsvCancelBtn,
+  downloadCsvDisableBtn,
   downloadCsvNote,
   downloadCsvExpiredNote,
   downloadCsvNoteText,
-  "tab-border-bottom": "_tab-border-bottom_1qrhu_271",
-  "download-info-text": "_download-info-text_1qrhu_279",
+  downloadCsvSuccessNote,
+  downloadCsvSuccessText,
+  "tab-border-bottom": "_tab-border-bottom_pprak_285",
+  "download-info-text": "_download-info-text_pprak_293",
   downloadUrlTimeline,
   timeLineItem,
   timeLineActiveIcon,
@@ -131454,6 +131595,21 @@ const getSqlStatement = ({
   });
   return replacedStr;
 };
+const isLinkExpired = (url) => {
+  const queryString = url.split("?")[1];
+  const params = new URLSearchParams(queryString);
+  const expires = parseInt(params.get("Expires"), 10);
+  const currentTime = Math.floor(Date.now() / 1e3);
+  const secondsLeft = expires - currentTime;
+  return { isExpired: currentTime >= expires, secondsLeft };
+};
+const getUrls = (urls) => {
+  try {
+    return JSON.parse(urls);
+  } catch {
+    return [];
+  }
+};
 const useDownloadRawCsv = (onCloseModal, metricItem, filterValues2) => {
   var _a2, _b2;
   const queryClient2 = useQueryClient();
@@ -131473,23 +131629,11 @@ const useDownloadRawCsv = (onCloseModal, metricItem, filterValues2) => {
   const { handleSubmit, register: register2 } = useForm();
   const { data: RawCsvUrlsData } = useExternalMetricRawCsvUrlsQuery(
     { externalMetricId: metricItem == null ? void 0 : metricItem.id },
-    { enabled: !!(metricItem == null ? void 0 : metricItem.id) }
-  );
-  const isLinkExpired = (url) => {
-    const queryString = url.split("?")[1];
-    const params = new URLSearchParams(queryString);
-    const expires = parseInt(params.get("Expires"), 10);
-    const currentTime = Math.floor(Date.now() / 1e3);
-    const secondsLeft = expires - currentTime;
-    return { isExpired: currentTime >= expires, secondsLeft };
-  };
-  const getUrls = (urls) => {
-    try {
-      return JSON.parse(urls);
-    } catch {
-      return [];
+    {
+      enabled: !!(metricItem == null ? void 0 : metricItem.id),
+      refetchInterval: 5e3
     }
-  };
+  );
   const rawCsvSettings = useMemo(
     () => {
       var _a3, _b3;
@@ -131619,7 +131763,6 @@ const useDownloadRawCsv = (onCloseModal, metricItem, filterValues2) => {
             setLoading(false);
             setError("");
             onSuccess();
-            onCloseModal(false);
           } else if (invokeSaveRawCsvDetails == null ? void 0 : invokeSaveRawCsvDetails.error) {
             setLoading(false);
             setError(invokeSaveRawCsvDetails.error);
@@ -131665,18 +131808,11 @@ const useDownloadRawCsv = (onCloseModal, metricItem, filterValues2) => {
                     { externalMetricId: metricItem == null ? void 0 : metricItem.id }
                   ],
                   (prev) => {
-                    const prevExternalMetricRawCsvUrls = prev == null ? void 0 : prev.externalMetricRawCsvUrls;
-                    const index2 = prevExternalMetricRawCsvUrls == null ? void 0 : prevExternalMetricRawCsvUrls.findIndex(
-                      (url) => url.externalMetricId === (metricItem == null ? void 0 : metricItem.id)
-                    );
-                    if (index2 > -1) {
-                      prevExternalMetricRawCsvUrls[index2] = {
-                        ...insert_externalMetricRawCsvUrls_one
-                      };
-                    }
                     return {
                       ...prev,
-                      externalMetricRawCsvUrls: prevExternalMetricRawCsvUrls
+                      externalMetricRawCsvUrls: [
+                        insert_externalMetricRawCsvUrls_one
+                      ]
                     };
                   }
                 );
@@ -131893,7 +132029,8 @@ const DownloadRawCsvModal = ({
             message: downloadCsvError
           }), /* @__PURE__ */ jsxs(ModalFooter, {
             children: [/* @__PURE__ */ jsx(Button, {
-              variant: "custom",
+              variant: "secondary",
+              size: "medium",
               type: "button",
               className: styles$a.downloadCsvCancelBtn,
               onClick: () => onCloseModal(false),
@@ -131973,7 +132110,8 @@ const DownloadRawCsvModal = ({
             message: downloadCsvError
           }), /* @__PURE__ */ jsxs(ModalFooter, {
             children: [/* @__PURE__ */ jsx(Button, {
-              variant: "custom",
+              variant: "secondary",
+              size: "medium",
               type: "button",
               className: styles$a.downloadCsvCancelBtn,
               onClick: () => onCloseModal(false),
@@ -131990,11 +132128,11 @@ const DownloadRawCsvModal = ({
               }),
               children: "Request url"
             }) : /* @__PURE__ */ jsx(Button, {
-              variant: "custom",
+              variant: "secondary",
               type: "button",
               size: "medium",
               isDisabled: true,
-              className: styles$a.downloadCsvCancelBtn,
+              className: styles$a.downloadCsvDisableBtn,
               children: "Request url"
             })]
           })]
@@ -132045,21 +132183,31 @@ const DownloadRawCsvModal = ({
                   children: "Your download link has expired. Please click on Request url to generate a new download url."
                 })]
               })]
-            }) : /* @__PURE__ */ jsxs("div", {
-              className: styles$a.downloadCsvNote,
-              children: [/* @__PURE__ */ jsx(Icons, {
-                name: "info-icon",
-                className: styles$a.popupItemIcon
-              }), /* @__PURE__ */ jsxs("div", {
-                className: styles$a.downloadCsvNoteText,
-                children: [/* @__PURE__ */ jsx(Text, {
-                  styleClass: "primary",
+            }) : /* @__PURE__ */ jsxs(Fragment, {
+              children: [/* @__PURE__ */ jsx("div", {
+                className: styles$a.downloadCsvSuccessNote,
+                children: /* @__PURE__ */ jsx(Text, {
+                  styleClass: "font-14b",
                   variant: "h1",
-                  children: "Note:"
-                }), /* @__PURE__ */ jsxs(Text, {
-                  styleClass: "font-14",
-                  variant: "p",
-                  children: ["Your download may expire in", " ", (csvDownloadUrls.expireUrlIn / 60).toFixed(2), " ", "minutes. Please click Download button to download your raw CSV file."]
+                  className: styles$a.downloadCsvSuccessText,
+                  children: "Congratulations! CSV download url is ready."
+                })
+              }), /* @__PURE__ */ jsxs("div", {
+                className: styles$a.downloadCsvNote,
+                children: [/* @__PURE__ */ jsx(Icons, {
+                  name: "info-icon",
+                  className: styles$a.popupItemIcon
+                }), /* @__PURE__ */ jsxs("div", {
+                  className: styles$a.downloadCsvNoteText,
+                  children: [/* @__PURE__ */ jsx(Text, {
+                    styleClass: "primary",
+                    variant: "h1",
+                    children: "Note:"
+                  }), /* @__PURE__ */ jsxs(Text, {
+                    styleClass: "font-14",
+                    variant: "p",
+                    children: ["Your download may expire in", " ", (csvDownloadUrls.expireUrlIn / 60).toFixed(2), " ", "minutes."]
+                  })]
                 })]
               })]
             }), downloadCsvError && /* @__PURE__ */ jsx(Error$1, {
@@ -132091,7 +132239,8 @@ const DownloadRawCsvModal = ({
                 })
               })
             }), /* @__PURE__ */ jsx(Button, {
-              variant: "custom",
+              variant: "secondary",
+              size: "medium",
               type: "button",
               className: styles$a.downloadCsvCancelBtn,
               onClick: () => onCloseModal(false),
@@ -132104,11 +132253,11 @@ const DownloadRawCsvModal = ({
               onClick: () => handleDownload(url),
               children: "Download"
             })), csvDownloadUrls.isExpired && /* @__PURE__ */ jsx(Button, {
-              variant: "custom",
+              variant: "secondary",
               type: "button",
               size: "medium",
               isDisabled: true,
-              className: styles$a.downloadCsvCancelBtn,
+              className: styles$a.downloadCsvDisableBtn,
               children: "Download"
             })]
           })]
@@ -132461,6 +132610,65 @@ 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,
@@ -132479,6 +132687,7 @@ var index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   isInFilterOperator,
   isNullFilterOperator,
   FilterField,
+  getFormattedFilterValue,
   GlobalFilters,
   Tooltip,
   InfoTooltip,
@@ -132525,7 +132734,8 @@ var index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   ChartPopup,
   DrillBreadCrumb,
   MetricFilterDropDown,
-  Alert
+  Alert,
+  AppliedFilter
 }, Symbol.toStringTag, { value: "Module" }));
 const mdiPlus = (props) => /* @__PURE__ */ jsx("svg", {
   viewBox: "0 0 24 24",
@@ -133116,7 +133326,7 @@ const EmbeddedDashboard = e__default.memo(({
     data,
     isLoading
   } = useDashboardContext();
-  const [appliedfilters, setAppliedFilters] = useState([]);
+  const [appliedfilters2, setAppliedFilters] = useState([]);
   const [isShowMetricCreateModal, setShowMetricCreateModal] = useState(false);
   const [globalFilters, setGlobalFilters] = useState({
     tableName: "",
@@ -133138,6 +133348,7 @@ 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"],
@@ -133178,31 +133389,46 @@ const EmbeddedDashboard = e__default.memo(({
           })]
         }), /* @__PURE__ */ jsxs("div", {
           className: styles$M["embedDashboard-wrapper"],
-          children: [data.externalDashboard.filters.length ? /* @__PURE__ */ jsx(PopoverMenu, {
-            button: /* @__PURE__ */ jsxs(Button, {
-              type: "button",
-              variant: "custom",
-              className: styles$M.filterButton,
-              children: [/* @__PURE__ */ jsxs("div", {
-                className: styles$M.filterText,
-                children: [/* @__PURE__ */ jsx(Icons, {
-                  name: "filter-icon"
-                }), " Filters"]
-              }), appliedfilters.length === 0 ? /* @__PURE__ */ jsx("div", {}) : /* @__PURE__ */ jsx("span", {
-                className: styles$M.filterLength,
-                children: appliedfilters.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) => setGlobalFilters(values),
-              appliedfilters,
-              setAppliedFilters
-            })
+          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
+                });
+              }
+            })]
           }) : null, /* @__PURE__ */ jsx(ExternalMetricList, {
             client: data.clientId,
             isLiveMode: data.isLiveMode,