@m4l/components 0.0.36 → 0.0.39

package/dist/components/DynamicFilter/index.js

@@ -1,6 +1,6 @@
 import { S as ScrollBar } from "../ScrollBar/index.js";
-import { styled } from "@mui/material/styles";
-import { useRef, useState, useMemo, useCallback, useEffect, createContext, useContext } from "react";
+import { styled, alpha } from "@mui/material/styles";
+import require$$0, { useRef, useState, useMemo, useCallback, useEffect, createContext, useContext } from "react";
 import { useModuleDictionary, useEnvironment, voidFunction, useHostTools, useFlagsPresent } from "@m4l/core";
 import * as Yup from "yup";
 import { useFormContext, useWatch } from "react-hook-form";
@@ -44,6 +44,7 @@ const ContainerApplyedFilters = styled("div")(({
   gap: theme.spacing(1.5)
 }));
 const STRING_OPERATORS = ["c", "nc"];
+const NUMBER_OPERATORS = ["b", "e", "ne", "gt", "gte", "lt", "lte"];
 const BOOLEAN_OPERATORS = ["e", "ne"];
 const DATE_TIME_OPERATORS = [
   "b",
@@ -56,13 +57,13 @@ const DATE_TIME_OPERATORS = [
 ];
 const ALL_FIELDS = {
   name: "all",
-  label: "filter.all_fields",
+  label: "dynamic_filter.all_fields",
   urlIcon: "https://s3.amazonaws.com/static.made4labs/environments/d1/frontend/components/icon/assets/icons/default.svg",
   type: "string",
   multiple: true,
   fixed: false
 };
-const WrapperStringFilter = styled("div")(({
+const WrapperStringFilter$1 = styled("div")(({
   theme
 }) => ({
   display: "flex",
@@ -74,9 +75,29 @@ const WrapperStringFilter = styled("div")(({
   padding: theme.spacing(3, 0),
   gap: theme.spacing(3)
 }));
-const WrapperAutoComplete$2 = styled("div")(() => ({
+const WrapperAutoComplete$3 = styled("div")(() => ({
   width: "100%"
 }));
+const getDefaultStringFilter = (field, fixed, getLabel) => {
+  const dfop1 = field.defaultOperand1;
+  const defaultFilter = {
+    id: 0,
+    n: field.name,
+    fixed,
+    isSetted: false,
+    o: "c",
+    labelOperator: "",
+    o1: "",
+    o2: "",
+    labelOperands: ""
+  };
+  if (dfop1 !== void 0 && typeof dfop1 === "string") {
+    defaultFilter.o1 = dfop1;
+  }
+  defaultFilter.labelOperands = defaultFilter.o1 + "";
+  defaultFilter.labelOperator = getLabel(`dynamic_filter.operator_${defaultFilter.o}`);
+  return defaultFilter;
+};
 function StringFilter() {
   const {
     popupData: {
@@ -104,12 +125,12 @@ function StringFilter() {
       return void 0;
     const newFilter = {
       id: filter.id,
-      fieldName: field.name,
+      n: field.name,
       fixed: filter.fixed,
       isSetted: true,
-      operator: data.valueOperator.id,
+      o: data.valueOperator.id,
       labelOperator: data.valueOperator.label,
-      operand1: data.valueOperand1,
+      o1: data.valueOperand1,
       labelOperands: data.valueOperand1
     };
     return newFilter;
@@ -123,7 +144,7 @@ function StringFilter() {
     }
     setTransformFunctionFormValuesToValues(transformFunctionFormValuesToValues);
     if (filter && field) {
-      setValue("valueOperand1", filter.operand1, {
+      setValue("valueOperand1", filter.o1, {
         shouldTouch: false,
         shouldValidate: false
       });
@@ -134,9 +155,9 @@ function StringFilter() {
     console.debug("InputRef", inputRef);
     inputRef.current?.focus();
   }, [isLoaded]);
-  return /* @__PURE__ */ jsx(WrapperStringFilter, {
+  return /* @__PURE__ */ jsx(WrapperStringFilter$1, {
     children: isLoaded && /* @__PURE__ */ jsxs(Fragment, {
-      children: [/* @__PURE__ */ jsx(WrapperAutoComplete$2, {
+      children: [/* @__PURE__ */ jsx(WrapperAutoComplete$3, {
         children: /* @__PURE__ */ jsx(RHFAutocomplete, {
           name: "valueOperator",
           autoComplete: "off",
@@ -166,9 +187,29 @@ const WrapperAllFieldsFilter$1 = styled("div")(({
   padding: theme.spacing(3, 0),
   gap: theme.spacing(3)
 }));
-const WrapperAutoComplete$1 = styled("div")(() => ({
+const WrapperAutoComplete$2 = styled("div")(() => ({
   width: "100%"
 }));
+const getDefaultBooleanFilter = (field, fixed, getLabel) => {
+  const dfop1 = field.defaultOperand1;
+  const defaultFilter = {
+    id: 0,
+    n: field.name,
+    fixed,
+    isSetted: true,
+    o: "e",
+    labelOperator: "",
+    o1: true,
+    o2: "",
+    labelOperands: ""
+  };
+  defaultFilter.labelOperator = getLabel(`dynamic_filter.operator_${defaultFilter.o}`);
+  if (dfop1 !== void 0 && typeof dfop1 === "boolean") {
+    defaultFilter.o1 = dfop1;
+  }
+  defaultFilter.labelOperands = getLabel(`dynamic_filter.operand_${defaultFilter.o1}`);
+  return defaultFilter;
+};
 function BooleanFilter() {
   const {
     setPoupEditValidationSchema,
@@ -194,22 +235,22 @@ function BooleanFilter() {
   })), [getLabelOperator]);
   const optionsYesNo = useMemo(() => [{
     value: true,
-    label: getLabel("filter.operand_true")
+    label: getLabel("dynamic_filter.operand_true")
   }, {
     value: false,
-    label: getLabel("filter.operand_false")
+    label: getLabel("dynamic_filter.operand_false")
   }], [getLabel]);
   const transformFunctionFormValuesToValues = useCallback((data) => {
     if (!filter || !field)
       return void 0;
     const newFilter = {
       id: filter.id,
-      fieldName: field.name,
+      n: field.name,
       fixed: filter.fixed,
       isSetted: true,
-      operator: data.valueOperator.id,
+      o: data.valueOperator.id,
       labelOperator: data.valueOperator.label,
-      operand1: data.valueOperand1.value,
+      o1: data.valueOperand1.value,
       labelOperands: data.valueOperand1.label
     };
     return newFilter;
@@ -217,15 +258,15 @@ function BooleanFilter() {
   useEffect(() => {
     if (!isLoaded) {
       setPoupEditValidationSchema({
-        valueOperator: Yup.object().nullable().required(getLabel(`operator_required`)),
-        valueOperand1: Yup.object().nullable().required(getLabel(`operand_required`))
+        valueOperator: Yup.object().nullable().required(getLabel(`error_operator_required`)),
+        valueOperand1: Yup.object().nullable().required(getLabel(`error_operand_required`))
       });
     }
     setTransformFunctionFormValuesToValues(transformFunctionFormValuesToValues);
     if (filter && field) {
       setValue("valueOperand1", {
-        value: filter.operand1,
-        label: getLabel(`filter.operand_${filter.operand1}`)
+        value: filter.o1,
+        label: getLabel(`dynamic_filter.operand_${filter.o1}`)
       }, {
         shouldTouch: false,
         shouldValidate: false
@@ -236,7 +277,7 @@ function BooleanFilter() {
   return /* @__PURE__ */ jsx(WrapperAllFieldsFilter$1, {
     id: "WrapperAllFieldsFilter",
     children: isLoaded && /* @__PURE__ */ jsxs(Fragment, {
-      children: [/* @__PURE__ */ jsx(WrapperAutoComplete$1, {
+      children: [/* @__PURE__ */ jsx(WrapperAutoComplete$2, {
         children: /* @__PURE__ */ jsx(RHFAutocomplete, {
           name: "valueOperator",
           autoComplete: "off",
@@ -245,7 +286,7 @@ function BooleanFilter() {
           isOptionEqualToValue: (option, value) => option.id === value.id,
           label: ""
         })
-      }), /* @__PURE__ */ jsx(WrapperAutoComplete$1, {
+      }), /* @__PURE__ */ jsx(WrapperAutoComplete$2, {
         children: /* @__PURE__ */ jsx(RHFAutocomplete, {
           name: "valueOperand1",
           autoComplete: "off",
@@ -270,9 +311,108 @@ const WrapperAllFieldsFilter = styled("div")(({
   padding: theme.spacing(3, 0),
   gap: theme.spacing(3)
 }));
-const WrapperAutoComplete = styled("div")(() => ({
+const WrapperAutoComplete$1 = styled("div")(() => ({
   width: "100%"
 }));
+function isValidDate(d) {
+  return d && d instanceof Date;
+}
+const verifyStringFilter = (filter) => {
+  if (typeof filter.o !== "string") {
+    return false;
+  }
+  if (STRING_OPERATORS.findIndex((f) => f === filter.o) === -1) {
+    return false;
+  }
+  if (typeof filter.o1 !== "string") {
+    return false;
+  }
+  return true;
+};
+const verifyNumberFilter = (filter) => {
+  if (typeof filter.o !== "number") {
+    return false;
+  }
+  if (NUMBER_OPERATORS.findIndex((f) => f === filter.o) === -1) {
+    return false;
+  }
+  if (typeof filter.o1 !== "number") {
+    return false;
+  }
+  if (filter.o === "b" && typeof filter.o2 !== "number") {
+    return false;
+  }
+  return true;
+};
+const verifyBooleanFilter = (filter) => {
+  if (typeof filter.o !== "string") {
+    return false;
+  }
+  if (BOOLEAN_OPERATORS.findIndex((f) => f === filter.o) === -1) {
+    return false;
+  }
+  if (typeof filter.o1 !== "boolean") {
+    return false;
+  }
+  return true;
+};
+const verifyDateTime = (filter) => {
+  if (typeof filter.o !== "string") {
+    return false;
+  }
+  if (DATE_TIME_OPERATORS.findIndex((f) => f === filter.o) === -1) {
+    return false;
+  }
+  if (typeof filter.o1 !== "string") {
+    return false;
+  }
+  if (filter.o === "b" && typeof filter.o2 !== "string") {
+    return false;
+  }
+  return true;
+};
+const getDefaultDateTimeFilter = (field, fixed, getLabel) => {
+  const defaultStartDate = new Date();
+  const defaultEndDate = new Date();
+  let dfop1 = field.defaultOperand1;
+  let dfop2 = field.defaultOperand2;
+  const defaultFilter = {
+    id: 0,
+    n: field.name,
+    fixed,
+    isSetted: true,
+    o: "b",
+    labelOperator: "",
+    o1: dfop1,
+    o2: dfop2,
+    labelOperands: ""
+  };
+  if (dfop1) {
+    if (isValidDate(dfop1)) {
+      defaultStartDate.setDate(dfop1.getDate());
+    } else {
+      dfop1 = void 0;
+    }
+  }
+  if (dfop1 === void 0) {
+    defaultStartDate.setHours(0, 0, 0, 0);
+  }
+  if (dfop2) {
+    if (isValidDate(dfop2)) {
+      defaultEndDate.setDate(dfop2.getDate());
+    } else {
+      dfop2 = void 0;
+    }
+  }
+  if (dfop2 === void 0) {
+    defaultEndDate.setHours(23, 59, 59, 999);
+  }
+  defaultFilter.o1 = defaultStartDate.toISOString();
+  defaultFilter.o2 = defaultEndDate.toISOString();
+  defaultFilter.labelOperands = `${format(defaultStartDate, "yyyy-MM-dd HH:mm:ss")} - ${format(defaultEndDate, "yyyy-MM-dd HH:mm:ss")}`;
+  defaultFilter.labelOperator = getLabel(`dynamic_filter.operator_${defaultFilter.o}`);
+  return defaultFilter;
+};
 function DateTimeFilter() {
   const {
     setPoupEditValidationSchema,
@@ -311,45 +451,45 @@ function DateTimeFilter() {
       return void 0;
     const newFilter = {
       id: filter.id,
-      fieldName: field.name,
+      n: field.name,
       fixed: filter.fixed,
       isSetted: true,
-      operator: data.valueOperator.id,
-      operand1: data.valueOperand1.toISOString(),
+      o: data.valueOperator.id,
+      o1: data.valueOperand1.toISOString(),
       labelOperator: data.valueOperator.label,
       labelOperands: ""
     };
     if (data.valueOperator.id === "b") {
-      newFilter.operand2 = data.valueOperand2.toISOString();
+      newFilter.o2 = data.valueOperand2.toISOString();
       newFilter.labelOperands = `${format(data.valueOperand1, datetime_format)} - ${format(data.valueOperand2, datetime_format)}`;
     } else {
-      newFilter.operand2 = newFilter.operand2 ? newFilter.operand2 : newFilter.operand1;
+      newFilter.o2 = newFilter.o2 ? newFilter.o2 : newFilter.o1;
       newFilter.labelOperands = format(data.valueOperand1, datetime_format);
     }
     return newFilter;
   }, []);
   useEffect(() => {
-    console.debug("useEffect Datetime", isLoaded, filter?.operand1, filter?.operand2);
+    console.debug("useEffect Datetime", isLoaded, filter?.o1, filter?.o2);
     if (!isLoaded) {
       setPoupEditValidationSchema({
         valueOperator: Yup.object().nullable().required(getLabel(`operator_required`)),
-        valueOperand1: Yup.date().test("valueOperand1", getLabel(`filter.error_invalid_date1`), (value) => {
+        valueOperand1: Yup.date().test("valueOperand1", getLabel(`dynamic_filter.error_invalid_date`), (value) => {
           return Boolean(value);
         }),
         valueOperand2: Yup.date().when(["valueOperator.id"], {
           is: "b",
-          then: Yup.date().test("DOB", getLabel(`filter.error_invalid_date2`), (value) => {
+          then: Yup.date().test("DOB", getLabel(`dynamic_filter.error_invalid_date`), (value) => {
             return Boolean(value);
           })
         })
       });
     }
     if (filter && field) {
-      setValue("valueOperand1", new Date(filter.operand1), {
+      setValue("valueOperand1", new Date(filter.o1), {
         shouldTouch: false,
         shouldValidate: false
       });
-      setValue("valueOperand2", new Date(filter.operand2), {
+      setValue("valueOperand2", new Date(filter.o2), {
         shouldTouch: false,
         shouldValidate: false
       });
@@ -359,7 +499,7 @@ function DateTimeFilter() {
   }, [getLabel, filter, field]);
   return /* @__PURE__ */ jsx(WrapperAllFieldsFilter, {
     children: isLoaded && /* @__PURE__ */ jsxs(Fragment, {
-      children: [/* @__PURE__ */ jsx(WrapperAutoComplete, {
+      children: [/* @__PURE__ */ jsx(WrapperAutoComplete$1, {
         children: /* @__PURE__ */ jsx(RHFAutocomplete, {
           name: "valueOperator",
           autoComplete: "off",
@@ -371,7 +511,8 @@ function DateTimeFilter() {
       }), /* @__PURE__ */ jsx(RHFDateTime, {
         name: "valueOperand1",
         autoComplete: "off",
-        label: ""
+        label: "",
+        focused: true
       }), operator && operator.id === "b" && /* @__PURE__ */ jsx(RHFDateTime, {
         name: "valueOperand2",
         autoComplete: "off",
@@ -380,126 +521,181 @@ function DateTimeFilter() {
     })
   });
 }
-function isValidDate(d) {
-  return d && d instanceof Date;
-}
-const verifyStringFilter = (filter) => {
-  if (typeof filter.operator !== "string") {
-    return false;
-  }
-  if (STRING_OPERATORS.findIndex((f) => f === filter.operator) === -1) {
-    return false;
-  }
-  if (typeof filter.operand1 !== "string") {
-    return false;
-  }
-  return true;
-};
-const verifyBooleanFilter = (filter) => {
-  if (typeof filter.operator !== "string") {
-    return false;
-  }
-  if (BOOLEAN_OPERATORS.findIndex((f) => f === filter.operator) === -1) {
-    return false;
-  }
-  if (typeof filter.operand1 !== "boolean") {
-    return false;
-  }
-  return true;
-};
-const verifyDateTime = (filter) => {
-  if (typeof filter.operator !== "string") {
-    return false;
-  }
-  if (DATE_TIME_OPERATORS.findIndex((f) => f === filter.operator) === -1) {
-    return false;
-  }
-  if (typeof filter.operand1 !== "string") {
-    return false;
-  }
-  if (filter.operator === "b" && typeof filter.operand2 !== "string") {
-    return false;
-  }
-  return true;
-};
-const getDefaultFilterValues = (field, fixed, getLabelOperator) => {
-  const defaultStartDate = new Date();
-  const defaultEndDate = new Date();
-  let dfop1 = field.defaultOperand1;
-  let dfop2 = field.defaultOperand2;
+const WrapperStringFilter = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  width: "100%",
+  minWidth: theme.spacing(3.75),
+  padding: theme.spacing(3, 0),
+  gap: theme.spacing(3)
+}));
+const WrapperAutoComplete = styled("div")(() => ({
+  width: "100%"
+}));
+const getDefaultNumberFilter = (field, fixed, getLabel) => {
+  const dfop1 = field.defaultOperand1;
+  const dfop2 = field.defaultOperand2;
   const defaultFilter = {
     id: 0,
-    fieldName: field.name,
+    n: field.name,
     fixed,
     isSetted: false,
-    operator: "c",
+    o: "e",
     labelOperator: "",
-    operand1: "",
+    o1: "",
+    o2: "",
     labelOperands: ""
   };
-  switch (field.type) {
-    case "string":
-      break;
-    case "number":
-    case "boolean":
-      defaultFilter.operator = "e";
-      if (dfop1 !== void 0 && typeof dfop1 === "boolean") {
-        defaultFilter.operand1 = dfop1;
-      } else {
-        defaultFilter.operand1 = true;
-      }
-      break;
-    case "time":
-    case "date":
-    case "datetime":
-      if (dfop1) {
-        if (isValidDate(dfop1)) {
-          defaultStartDate.setDate(dfop1.getDate());
-        } else {
-          dfop1 = void 0;
-        }
-      }
-      if (dfop1 === void 0) {
-        defaultStartDate.setHours(0, 0, 0, 0);
-      }
-      if (dfop2) {
-        if (isValidDate(dfop2)) {
-          defaultEndDate.setDate(dfop2.getDate());
-        } else {
-          dfop2 = void 0;
-        }
-      }
-      if (dfop2 === void 0) {
-        defaultEndDate.setHours(23, 59, 59, 999);
-      }
-      defaultFilter.operator = "b";
-      defaultFilter.operand1 = defaultStartDate.toISOString();
-      defaultFilter.operand2 = defaultEndDate.toISOString();
-      defaultFilter.labelOperands = `${format(defaultStartDate, "yyyy-MM-dd HH:mm:ss")} - ${format(defaultEndDate, "yyyy-MM-dd HH:mm:ss")}`;
-      defaultFilter.isSetted = true;
-      break;
+  if (dfop1 !== void 0 && typeof dfop1 === "number") {
+    defaultFilter.o1 = dfop1;
+    defaultFilter.labelOperands = defaultFilter.o1;
   }
-  defaultFilter.labelOperator = getLabelOperator(defaultFilter.operator);
-  console.log("operator", defaultFilter);
+  if (dfop2 !== void 0 && typeof dfop2 === "number") {
+    defaultFilter.o2 = dfop2;
+  }
+  defaultFilter.labelOperator = getLabel(`dynamic_filter.operator_${defaultFilter.o}`);
   return defaultFilter;
 };
+function NumberFilter() {
+  const {
+    popupData: {
+      filter,
+      field
+    },
+    setPoupEditValidationSchema,
+    setFnTransformFormValuesIntoValues: setTransformFunctionFormValuesToValues,
+    getLabelOperator
+  } = useBase();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const inputRef = useRef(null);
+  const {
+    control,
+    setValue
+  } = useFormContext();
+  const [isLoaded, setIsLoaded] = useState(false);
+  const operator = useWatch({
+    control,
+    name: "valueOperator"
+  });
+  const options = useMemo(() => NUMBER_OPERATORS.map((o) => ({
+    id: o,
+    label: getLabelOperator(o)
+  })), [getLabelOperator]);
+  const transformFunctionFormValuesToValues = useCallback((data) => {
+    if (!filter || !field)
+      return void 0;
+    const newFilter = {
+      id: filter.id,
+      n: field.name,
+      fixed: filter.fixed,
+      isSetted: true,
+      o: data.valueOperator.id,
+      o1: Number(data.valueOperand1),
+      o2: data.valueOperand2,
+      labelOperator: data.valueOperator.label,
+      labelOperands: data.valueOperand1
+    };
+    if (data.valueOperator.id === "b") {
+      newFilter.labelOperands = `${data.valueOperand1} - ${data.valueOperand2}`;
+      newFilter.o2 = Number(data.valueOperand2);
+    } else {
+      newFilter.o2 = void 0;
+    }
+    return newFilter;
+  }, []);
+  useEffect(() => {
+    if (!isLoaded) {
+      setPoupEditValidationSchema({
+        valueOperator: Yup.object().nullable().required(getLabel(`dynamic_filter.error_operator_required`)),
+        valueOperand1: Yup.number().typeError(getLabel(`dynamic_filter.error_operand_mustbe_number`)),
+        valueOperand2: Yup.string().when("valueOperator", {
+          is: (o) => {
+            console.log("valueOperand2", o);
+            return o.id === "b";
+          },
+          then: Yup.string().test("DOB", getLabel(`dynamic_filter.error_operand_mustbe_number`), (value) => {
+            console.log("imprimir", value);
+            if (value === "")
+              return false;
+            return !isNaN(Number(value));
+          })
+        })
+      });
+    }
+    setTransformFunctionFormValuesToValues(transformFunctionFormValuesToValues);
+    if (filter && field) {
+      setValue("valueOperand1", filter.o1, {
+        shouldTouch: false,
+        shouldValidate: false
+      });
+      setValue("valueOperand2", filter.o2, {
+        shouldTouch: false,
+        shouldValidate: false
+      });
+    }
+    setIsLoaded(true);
+  }, [getLabel, filter, field]);
+  useEffect(() => {
+    console.debug("InputRef", inputRef);
+    inputRef.current?.focus();
+  }, [isLoaded]);
+  return /* @__PURE__ */ jsx(WrapperStringFilter, {
+    children: isLoaded && /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsx(WrapperAutoComplete, {
+        children: /* @__PURE__ */ jsx(RHFAutocomplete, {
+          name: "valueOperator",
+          autoComplete: "off",
+          options,
+          getOptionLabel: (option) => option.label,
+          isOptionEqualToValue: (option, value) => option.id === value.id,
+          label: ""
+        })
+      }), /* @__PURE__ */ jsx(RHFTextField, {
+        name: "valueOperand1",
+        ref: inputRef,
+        focused: true
+      }), operator && operator.id === "b" && /* @__PURE__ */ jsx(RHFTextField, {
+        name: "valueOperand2",
+        ref: inputRef
+      })]
+    })
+  });
+}
+const strategiesDefaultFilterValues = {
+  string: getDefaultStringFilter,
+  number: getDefaultNumberFilter,
+  boolean: getDefaultBooleanFilter,
+  datetime: getDefaultDateTimeFilter,
+  __default__: () => {
+    throw new Error("Type no defined");
+  }
+};
+const getDefaultFilterValues = (field, fixed, getLabel) => {
+  const transformer = strategiesDefaultFilterValues[field.type] ?? strategiesDefaultFilterValues.__default__;
+  return transformer(field, fixed, getLabel);
+};
+const strategiesEditFilterComponent = {
+  string: StringFilter,
+  number: NumberFilter,
+  boolean: BooleanFilter,
+  datetime: DateTimeFilter,
+  __default__: require$$0.Fragment
+};
 const PopupEditFilterComponent = (props) => {
   const {
     getFieldByName
   } = useBase();
-  const field = getFieldByName(props.filter.fieldName);
+  const field = getFieldByName(props.filter.n);
   if (!field)
     return /* @__PURE__ */ jsx(Fragment, {});
-  switch (field.type) {
-    case "string":
-      return /* @__PURE__ */ jsx(StringFilter, {});
-    case "boolean":
-      return /* @__PURE__ */ jsx(BooleanFilter, {});
-    case "datetime":
-      return /* @__PURE__ */ jsx(DateTimeFilter, {});
-    default:
-      return /* @__PURE__ */ jsx(Fragment, {});
-  }
+  const Component = strategiesEditFilterComponent[field.type] ?? strategiesEditFilterComponent.__default__;
+  return /* @__PURE__ */ jsx(Component, {});
 };
 const initialState = {
   fields: [],
@@ -543,15 +739,24 @@ const getMaxId = (applyedFilters) => {
 const getFilterById = (id, applyedFilters) => {
   return applyedFilters.findIndex((f) => f.id === id);
 };
-const getRawFilter = (applyedFilter) => {
+const formatToInitialFilters = (applyedFilter) => {
+  return applyedFilter.map((af) => ({
+    n: af.n,
+    o: af.o,
+    labelOperands: af.labelOperands,
+    o1: af.o1,
+    o2: af.o2
+  }));
+};
+const formatToRawFilter = (applyedFilter) => {
   return applyedFilter.map((af) => ({
-    n: af.fieldName,
-    o: af.operator,
-    o1: af.operand1,
-    o2: af.operand2
+    n: af.n,
+    o: af.o,
+    o1: af.o1,
+    o2: af.o2
   }));
 };
-const getInitialFilters = (fields, filters, getFieldByName, getLabelOperator) => {
+const getInitialFilters = (fields, filters, getFieldByName, getLabel) => {
   const newFilters = [];
   const fixedFields = [];
   for (let index = 0; index < filters.length; index++) {
@@ -560,15 +765,19 @@ const getInitialFilters = (fields, filters, getFieldByName, getLabelOperator) =>
       ...filters[index],
       id: 0,
       isSetted: true,
-      fixed: false
+      fixed: false,
+      labelOperator: ""
     };
-    const field = getFieldByName(filter.fieldName);
+    const field = getFieldByName(filter.n);
     if (!field)
       continue;
     switch (field.type) {
       case "string":
         add = verifyStringFilter(filter);
         break;
+      case "number":
+        add = verifyNumberFilter(filter);
+        break;
       case "boolean":
         add = verifyBooleanFilter(filter);
         break;
@@ -589,14 +798,15 @@ const getInitialFilters = (fields, filters, getFieldByName, getLabelOperator) =>
       }
       filter.isSetted = true;
       filter.id = newFilters.length + 1;
+      filter.labelOperator = getLabel(`dynamic_filter.operator_${filter.o}`);
       newFilters.push(filter);
     }
   }
   for (let index = 0; index < fields.length; index++) {
     const field = fields[index];
     if (field.fixed) {
-      if (!filters.find((f) => f.fieldName === field.name)) {
-        const newFilter = getDefaultFilterValues(field, true, getLabelOperator);
+      if (!filters.find((f) => f.n === field.name)) {
+        const newFilter = getDefaultFilterValues(field, true, getLabel);
         newFilter.id = newFilters.length + 1;
         newFilters.push(newFilter);
       }
@@ -633,7 +843,7 @@ function BaseProvider(props) {
     return {
       ...ALL_FIELDS,
       label: getLabel("filter.all_fields"),
-      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/filter/assets/icons/all_fields.svg`
+      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/all_fields.svg`
     };
   }, [getLabel, host_static_assets, environment_assets]);
   const [inEdition, setInEdition] = useState(false);
@@ -648,9 +858,9 @@ function BaseProvider(props) {
     });
   }, [fields, all_fields]);
   const getLabelOperator = useCallback((operator) => {
-    return getLabel(`filter.operator_${operator}`);
+    return getLabel(`dynamic_filter.operator_${operator}`);
   }, [getLabel]);
-  const [applyedFilters, setApplyedFilters] = useState(getInitialFilters(fields, initialFilters, getFieldByName, getLabelOperator));
+  const [applyedFilters, setApplyedFilters] = useState(getInitialFilters(fields, initialFilters, getFieldByName, getLabel));
   const availableFields = useMemo(() => {
     const newFields = [];
     for (let index = 0; index < fields.length; index++) {
@@ -658,7 +868,7 @@ function BaseProvider(props) {
       const field = fields[index];
       add = true;
       if (field.multiple !== void 0 && field.multiple === false) {
-        const fIndx = applyedFilters.findIndex((f) => f.fieldName === field.name);
+        const fIndx = applyedFilters.findIndex((f) => f.n === field.name);
         if (fIndx > -1) {
           add = false;
         }
@@ -673,9 +883,9 @@ function BaseProvider(props) {
     if (isValid) {
       if (!automatic)
         setIsDirty(false);
-      onChangeFilter(applyedFilters, getRawFilter(applyedFilters));
+      onChangeFilter(formatToInitialFilters(applyedFilters), formatToRawFilter(applyedFilters));
     } else {
-      toast(getLabel("filter.error_filters_no_setted"), {
+      toast(getLabel("dynamic_filter.error_filters_no_setted"), {
         type: "error",
         autoClose: 1e4
       });
@@ -693,9 +903,8 @@ function BaseProvider(props) {
       return;
     }
     if (!NoValid) {
-      console.log("Ingrese");
       setIsDirty(false);
-      onChangeFilter(applyedFilters, getRawFilter(applyedFilters));
+      onChangeFilter(formatToInitialFilters(applyedFilters), formatToRawFilter(applyedFilters));
     }
   }, [applyedFilters]);
   const addFilter = useCallback((newFilter) => {
@@ -704,7 +913,7 @@ function BaseProvider(props) {
       const newFilterFull = {
         ...newFilter,
         id: getMaxId(lastApplyedFilters) + 1,
-        labelOperator: getLabelOperator(newFilter.operator)
+        labelOperator: getLabelOperator(newFilter.o)
       };
       newArray.push(newFilterFull);
       return newArray;
@@ -717,7 +926,7 @@ function BaseProvider(props) {
       if (findedFilter > -1) {
         newArray.splice(findedFilter, 1, {
           ...newFilter,
-          labelOperator: getLabelOperator(newFilter.operator)
+          labelOperator: getLabelOperator(newFilter.o)
         });
       }
       return newArray;
@@ -758,7 +967,7 @@ function BaseProvider(props) {
   const showPopupForAddFilter = useCallback((anchorEl, field) => {
     setPopupData({
       popupAnchorEl: anchorEl,
-      filter: getDefaultFilterValues(field, false, getLabelOperator),
+      filter: getDefaultFilterValues(field, false, getLabel),
       field
     });
     setInEdition(true);
@@ -767,7 +976,7 @@ function BaseProvider(props) {
     setPopupData({
       popupAnchorEl: anchorEl,
       filter: filterToEdit,
-      field: getFieldByName(filterToEdit.fieldName)
+      field: getFieldByName(filterToEdit.n)
     });
     setInEdition(true);
   }, []);
@@ -875,7 +1084,7 @@ const ContainerOperands = styled("span")(({
 }));
 function ApplyedFilter(props) {
   const {
-    fieldName,
+    n: fieldName,
     id,
     isSetted,
     fixed,
@@ -1015,28 +1224,27 @@ const SKTWrapperFilterButton = styled("div")(({
   justifyContent: "center",
   alignItems: "center",
   minWidth: theme.spacing(3.75),
-  height: theme.spacing(3.75)
-}));
-styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  minWidth: theme.spacing(3.75),
-  height: theme.spacing(3.75)
+  height: theme.spacing(3.75),
+  background: alpha(theme.palette.primary.main, 0.3)
 }));
 const WrapperFilterButton = styled("div")(() => ({
   "&.isDirty": {
+    animationName: "dirtyEffect",
+    animationDuration: "1s",
+    animationFillMode: "both",
+    animationIterationCount: "infinite",
+    transition: "all .3s",
     "@keyframes dirtyEffect": {
-      from: {
+      "20%": {
         opacity: 1
       },
-      to: {
-        opacity: 0
+      "50%": {
+        opacity: 0.5
+      },
+      "100%": {
+        opacity: 1
       }
-    },
-    animation: "dirtyEffect 2s infinite ease"
+    }
   },
   "&.isDirtyError": {}
 }));
@@ -1064,18 +1272,21 @@ function FilterButton() {
   }
   const color = useMemo(() => {
     if (automatic) {
-      return "default";
+      return "active";
     }
     if (!isValid) {
       return "error";
     }
-    return "primary";
+    return "selected";
   }, [automatic, isValid]);
+  console.log("Dynamic color value", color);
+  console.log("Dynamic automatic value", automatic);
   return /* @__PURE__ */ jsx(WrapperFilterButton, {
+    id: "WrapperFilterButton",
     className: isDirty && isValid ? "isDirty" : "",
     children: /* @__PURE__ */ jsx(IconButton, {
-      color,
-      dictionaryTooltip: "filter.filter_tooltip",
+      bgColor: color,
+      dictionaryTooltip: "dynamic_filter.filter_tooltip",
       onClick: () => fireOnChangeFilters(),
       "aria-label": "settings",
       src: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/${automatic ? "refresh" : "search"}.svg`
@@ -1171,11 +1382,11 @@ function InputFilter() {
     }
     if (withAllField) {
       addFilter({
-        fieldName: ALL_FIELDS.name,
+        n: ALL_FIELDS.name,
         isSetted: true,
         fixed: false,
-        operator: "c",
-        operand1: valueFilter,
+        o: "c",
+        o1: valueFilter,
         labelOperands: valueFilter
       });
       setValueFilter("");
@@ -1186,6 +1397,7 @@ function InputFilter() {
   if (!withAllField && availableFields.length == 0) {
     return /* @__PURE__ */ jsx(Fragment, {});
   }
+  console.log("availableFields test", availableFields.length);
   return /* @__PURE__ */ jsxs(WrapperInputFilter, {
     id: "WrapperInputFilter",
     children: [/* @__PURE__ */ jsx(StyledInputFilter, {
@@ -1195,7 +1407,7 @@ function InputFilter() {
       onClick: onClickFilter,
       onChange: onChangeFilter,
       onKeyPress: handleKeyPressMenu
-    }), /* @__PURE__ */ jsx(MenuPopover, {
+    }), availableFields.length > 0 && /* @__PURE__ */ jsx(MenuPopover, {
       id: "MenuPopover",
       open: Boolean(openAnchorEl),
       anchorEl: openAnchorEl,
@@ -1283,8 +1495,8 @@ const PopupEditFilter = () => {
     const valuesFilter = {
       ...filter,
       valueOperator: {
-        id: filter.operator,
-        label: getLabelOperator(filter.operator)
+        id: filter.o,
+        label: getLabelOperator(filter.o)
       }
     };
     return valuesFilter;