@m4l/components 0.0.34 → 0.0.37

package/dist/components/DynamicFilter/index.js

@@ -1,7 +1,7 @@
 import { S as ScrollBar } from "../ScrollBar/index.js";
-import { styled } from "@mui/material/styles";
+import { styled, alpha } from "@mui/material/styles";
 import { useRef, useState, useMemo, useCallback, useEffect, createContext, useContext } from "react";
-import { useModuleDictionary, voidFunction, useHostTools, useEnvironment, useFlagsPresent } from "@m4l/core";
+import { useModuleDictionary, useEnvironment, voidFunction, useHostTools, useFlagsPresent } from "@m4l/core";
 import * as Yup from "yup";
 import { useFormContext, useWatch } from "react-hook-form";
 import { F as FormProvider } from "../hook-form/FormProvider/index.js";
@@ -29,6 +29,12 @@ import { M as MenuPopover } from "../mui_extended/MenuPopover/index.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
 const WrapperApplyedFilters = styled("div")(({
   theme
+}) => ({
+  width: "100%",
+  marginLeft: theme.spacing(1.5)
+}));
+const ContainerApplyedFilters = styled("div")(({
+  theme
 }) => ({
   width: "100%",
   display: "flex",
@@ -38,6 +44,7 @@ const WrapperApplyedFilters = 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",
@@ -50,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",
@@ -68,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,
+    fieldName: field.name,
+    fixed,
+    isSetted: false,
+    operator: "c",
+    labelOperator: "",
+    operand1: "",
+    operand2: "",
+    labelOperands: ""
+  };
+  if (dfop1 !== void 0 && typeof dfop1 === "string") {
+    defaultFilter.operand1 = dfop1;
+  }
+  defaultFilter.labelOperands = defaultFilter.operand1 + "";
+  defaultFilter.labelOperator = getLabel(`dynamic_filter.operator_${defaultFilter.operator}`);
+  return defaultFilter;
+};
 function StringFilter() {
   const {
     popupData: {
@@ -128,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",
@@ -160,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,
+    fieldName: field.name,
+    fixed,
+    isSetted: true,
+    operator: "e",
+    labelOperator: "",
+    operand1: true,
+    operand2: "",
+    labelOperands: ""
+  };
+  defaultFilter.labelOperator = getLabel(`dynamic_filter.operator_${defaultFilter.operator}`);
+  if (dfop1 !== void 0 && typeof dfop1 === "boolean") {
+    defaultFilter.operand1 = dfop1;
+  }
+  defaultFilter.labelOperands = getLabel(`dynamic_filter.operand_${defaultFilter.operand1}`);
+  return defaultFilter;
+};
 function BooleanFilter() {
   const {
     setPoupEditValidationSchema,
@@ -188,10 +235,10 @@ 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)
@@ -219,7 +266,7 @@ function BooleanFilter() {
     if (filter && field) {
       setValue("valueOperand1", {
         value: filter.operand1,
-        label: getLabel(`filter.operand_${filter.operand1}`)
+        label: getLabel(`dynamic_filter.operand_${filter.operand1}`)
       }, {
         shouldTouch: false,
         shouldValidate: false
@@ -230,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",
@@ -239,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",
@@ -264,9 +311,93 @@ 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.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 getDefaultDateTimeFilter = (field, fixed, getLabel) => {
+  const defaultStartDate = new Date();
+  const defaultEndDate = new Date();
+  let dfop1 = field.defaultOperand1;
+  let dfop2 = field.defaultOperand2;
+  const defaultFilter = {
+    id: 0,
+    fieldName: field.name,
+    fixed,
+    isSetted: true,
+    operator: "b",
+    labelOperator: "",
+    operand1: dfop1,
+    operand2: 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.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.labelOperator = getLabel(`dynamic_filter.operator_${defaultFilter.operator}`);
+  return defaultFilter;
+};
 function DateTimeFilter() {
   const {
     setPoupEditValidationSchema,
@@ -276,6 +407,11 @@ function DateTimeFilter() {
   const {
     getLabel
   } = useModuleDictionary();
+  const {
+    dfnsFormat: {
+      datetime_format
+    }
+  } = useEnvironment();
   const {
     popupData: {
       filter,
@@ -310,10 +446,10 @@ function DateTimeFilter() {
     };
     if (data.valueOperator.id === "b") {
       newFilter.operand2 = data.valueOperand2.toISOString();
-      newFilter.labelOperands = `${format(data.valueOperand1, "yyyy-MM-dd HH:mm:ss")} - ${format(data.valueOperand2, "yyyy-MM-dd HH:mm:ss")}`;
+      newFilter.labelOperands = `${format(data.valueOperand1, datetime_format)} - ${format(data.valueOperand2, datetime_format)}`;
     } else {
       newFilter.operand2 = newFilter.operand2 ? newFilter.operand2 : newFilter.operand1;
-      newFilter.labelOperands = format(data.valueOperand1, "yyyy-MM-dd HH:mm:ss");
+      newFilter.labelOperands = format(data.valueOperand1, datetime_format);
     }
     return newFilter;
   }, []);
@@ -322,12 +458,12 @@ function DateTimeFilter() {
     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_date1`), (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_date2`), (value) => {
             return Boolean(value);
           })
         })
@@ -348,7 +484,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",
@@ -360,7 +496,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",
@@ -369,108 +506,166 @@ 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,
     fixed,
     isSetted: false,
-    operator: "c",
+    operator: "e",
     labelOperator: "",
     operand1: "",
+    operand2: "",
     labelOperands: ""
   };
+  if (dfop1 !== void 0 && typeof dfop1 === "number") {
+    defaultFilter.operand1 = dfop1;
+    defaultFilter.labelOperands = defaultFilter.operand1;
+  }
+  if (dfop2 !== void 0 && typeof dfop2 === "number") {
+    defaultFilter.operand2 = dfop2;
+  }
+  defaultFilter.labelOperator = getLabel(`dynamic_filter.operator_${defaultFilter.operator}`);
+  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,
+      fieldName: field.name,
+      fixed: filter.fixed,
+      isSetted: true,
+      operator: data.valueOperator.id,
+      operand1: Number(data.valueOperand1),
+      operand2: data.valueOperand2,
+      labelOperator: data.valueOperator.label,
+      labelOperands: data.valueOperand1
+    };
+    if (data.valueOperator.id === "b") {
+      newFilter.labelOperands = `${data.valueOperand1} - ${data.valueOperand2}`;
+      newFilter.operand2 = Number(data.valueOperand2);
+    } else {
+      newFilter.operand2 = void 0;
+    }
+    return newFilter;
+  }, []);
+  useEffect(() => {
+    if (!isLoaded) {
+      setPoupEditValidationSchema({
+        valueOperator: Yup.object().nullable().required(getLabel(`dynamic_filter.operator_required`)),
+        valueOperand1: Yup.number().typeError(getLabel(`dynamic_filter.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.operand_mustbe_number`), (value) => {
+            console.log("imprimir", value);
+            if (value === "")
+              return false;
+            return !isNaN(Number(value));
+          })
+        })
+      });
+    }
+    setTransformFunctionFormValuesToValues(transformFunctionFormValuesToValues);
+    if (filter && field) {
+      setValue("valueOperand1", filter.operand1, {
+        shouldTouch: false,
+        shouldValidate: false
+      });
+      setValue("valueOperand2", filter.operand2, {
+        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 getDefaultFilterValues = (field, fixed, getLabel) => {
   switch (field.type) {
     case "string":
-      break;
+      return getDefaultStringFilter(field, fixed, getLabel);
     case "number":
+      return getDefaultNumberFilter(field, fixed, getLabel);
     case "boolean":
-      defaultFilter.operator = "e";
-      if (dfop1 !== void 0 && typeof dfop1 === "boolean") {
-        defaultFilter.operand1 = dfop1;
-      } else {
-        defaultFilter.operand1 = true;
-      }
-      break;
+      return getDefaultBooleanFilter(field, fixed, getLabel);
     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;
+      return getDefaultDateTimeFilter(field, fixed, getLabel);
   }
-  defaultFilter.labelOperator = getLabelOperator(defaultFilter.operator);
-  console.log("operator", defaultFilter);
-  return defaultFilter;
+  throw new Error("Type no defined");
 };
 const PopupEditFilterComponent = (props) => {
   const {
@@ -482,6 +677,8 @@ const PopupEditFilterComponent = (props) => {
   switch (field.type) {
     case "string":
       return /* @__PURE__ */ jsx(StringFilter, {});
+    case "number":
+      return /* @__PURE__ */ jsx(NumberFilter, {});
     case "boolean":
       return /* @__PURE__ */ jsx(BooleanFilter, {});
     case "datetime":
@@ -540,7 +737,7 @@ const getRawFilter = (applyedFilter) => {
     o2: af.operand2
   }));
 };
-const getInitialFilters = (fields, filters, getFieldByName, getLabelOperator) => {
+const getInitialFilters = (fields, filters, getFieldByName, getLabel) => {
   const newFilters = [];
   const fixedFields = [];
   for (let index = 0; index < filters.length; index++) {
@@ -585,7 +782,7 @@ const getInitialFilters = (fields, filters, getFieldByName, getLabelOperator) =>
     const field = fields[index];
     if (field.fixed) {
       if (!filters.find((f) => f.fieldName === field.name)) {
-        const newFilter = getDefaultFilterValues(field, true, getLabelOperator);
+        const newFilter = getDefaultFilterValues(field, true, getLabel);
         newFilter.id = newFilters.length + 1;
         newFilters.push(newFilter);
       }
@@ -614,12 +811,17 @@ function BaseProvider(props) {
   } = useModuleDictionary();
   const [popupValidationSchema, setInternalPopupValidationSchema] = useState(Yup.object().shape({}));
   const [fnTransformFormValuesIntoRawValues, setInternalfnTransormFormValuesIntoRawValues] = useState(() => void 0);
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
   const all_fields = useMemo(() => {
     return {
       ...ALL_FIELDS,
-      label: getLabel("filter.all_fields")
+      label: getLabel("filter.all_fields"),
+      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/all_fields.svg`
     };
-  }, [getLabel]);
+  }, [getLabel, host_static_assets, environment_assets]);
   const [inEdition, setInEdition] = useState(false);
   const [isDirty, setIsDirty] = useState(!automatic);
   const [isValid, setIsValid] = useState(false);
@@ -632,9 +834,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++) {
@@ -659,7 +861,7 @@ function BaseProvider(props) {
         setIsDirty(false);
       onChangeFilter(applyedFilters, getRawFilter(applyedFilters));
     } else {
-      toast(getLabel("filter.error_filters_no_setted"), {
+      toast(getLabel("dynamic_filter.error_filters_no_setted"), {
         type: "error",
         autoClose: 1e4
       });
@@ -677,7 +879,6 @@ function BaseProvider(props) {
       return;
     }
     if (!NoValid) {
-      console.log("Ingrese");
       setIsDirty(false);
       onChangeFilter(applyedFilters, getRawFilter(applyedFilters));
     }
@@ -742,7 +943,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);
@@ -876,7 +1077,7 @@ function ApplyedFilter(props) {
   } = useBase();
   const {
     host_static_assets,
-    environment
+    environment_assets
   } = useEnvironment();
   console.log("fieldName by ApplyedFilter 1", getFieldByName(fieldName));
   const field = useMemo(() => {
@@ -905,7 +1106,7 @@ function ApplyedFilter(props) {
   return /* @__PURE__ */ jsxs(WrapperApplyedFilter, {
     id: "WrapperApplyedFilter",
     className: !isSetted ? "waf_no_setted" : "",
-    children: [/* @__PURE__ */ jsx(Icon, {
+    children: [urlIcon && /* @__PURE__ */ jsx(Icon, {
       src: urlIcon,
       onClick
     }), /* @__PURE__ */ jsxs(AplyedFilterStyled, {
@@ -918,7 +1119,7 @@ function ApplyedFilter(props) {
         children: labelOperands
       })]
     }), !fixed && /* @__PURE__ */ jsx(IconButton, {
-      src: `${host_static_assets}/${environment}/frontend/components/dynamic_filter/assets/icons/close.svg`,
+      src: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/close.svg`,
       onClick: onDelete
     })]
   });
@@ -933,12 +1134,9 @@ function ApplyedFilters() {
       id: "WrapperApplyedFilters"
     });
   }
-  return /* @__PURE__ */ jsx("div", {
-    style: {
-      width: "100%"
-    },
+  return /* @__PURE__ */ jsx(WrapperApplyedFilters, {
     children: /* @__PURE__ */ jsx(ScrollBar, {
-      children: /* @__PURE__ */ jsx(WrapperApplyedFilters, {
+      children: /* @__PURE__ */ jsx(ContainerApplyedFilters, {
         id: "WrapperApplyedFilters",
         children: [...applyedFilters].sort((a, b) => a.isSetted === b.isSetted ? 0 : a.isSetted ? -1 : 1).reverse().map((filter) => /* @__PURE__ */ jsx(ApplyedFilter, {
           ...filter
@@ -968,11 +1166,12 @@ const WrapperClearFilters = styled$1("div")(({
 const ClearFilters = () => {
   const {
     host_static_assets,
-    environment
+    environment_assets
   } = useEnvironment();
   const {
     clearFilters,
-    isSkeleton
+    isSkeleton,
+    applyedFilters
   } = useBase();
   if (isSkeleton) {
     return /* @__PURE__ */ jsx(SKTClearFilters, {
@@ -983,12 +1182,16 @@ const ClearFilters = () => {
       })
     });
   }
-  return /* @__PURE__ */ jsx(WrapperClearFilters, {
-    children: /* @__PURE__ */ jsx(IconButton, {
-      src: `${host_static_assets}/${environment}/frontend/components/dynamic_filter/assets/icons/clear.svg`,
-      onClick: clearFilters
-    })
-  });
+  console.log("Dynamic validation", applyedFilters.findIndex((f) => f.fixed == false) > -1);
+  if (applyedFilters.findIndex((f) => f.fixed == false) > -1) {
+    return /* @__PURE__ */ jsx(WrapperClearFilters, {
+      children: /* @__PURE__ */ jsx(IconButton, {
+        src: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/clear.svg`,
+        onClick: clearFilters
+      })
+    });
+  }
+  return /* @__PURE__ */ jsx(Fragment, {});
 };
 const SKTWrapperFilterButton = styled("div")(({
   theme
@@ -997,28 +1200,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": {}
 }));
@@ -1032,7 +1234,7 @@ function FilterButton() {
   } = useBase();
   const {
     host_static_assets,
-    environment
+    environment_assets
   } = useEnvironment();
   console.log("Render isDirty", isDirty, automatic);
   if (isSkeleton) {
@@ -1046,21 +1248,24 @@ 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}/frontend/components/dynamic_filter/assets/icons/${automatic ? "refresh" : "search"}.svg`
+      src: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/${automatic ? "refresh" : "search"}.svg`
     })
   });
 }
@@ -1072,7 +1277,7 @@ const WrapperInputFilter = styled("div")(({
   alignItems: "center",
   width: "100%",
   height: theme.spacing(3.75),
-  margin: theme.spacing(0, 1.5),
+  marginLeft: theme.spacing(1.5),
   padding: theme.spacing(0, 1.5),
   borderRight: `1px solid ${theme.palette.divider}`,
   borderLeft: `1px solid ${theme.palette.divider}`,
@@ -1165,6 +1370,10 @@ function InputFilter() {
     }
   };
   console.log("Render 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, {
@@ -1174,7 +1383,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,
@@ -1301,8 +1510,8 @@ const PopupEditFilter = () => {
         urlCancel: -1,
         children: /* @__PURE__ */ jsxs(WrapperPopupEditFilter, {
           children: [/* @__PURE__ */ jsxs(HeaderContainer, {
-            children: [/* @__PURE__ */ jsx(Icon, {
-              src: field?.urlIcon
+            children: [field?.urlIcon && /* @__PURE__ */ jsx(Icon, {
+              src: field.urlIcon
             }), /* @__PURE__ */ jsx(TitleContainer, {
               children: field?.label
             })]
@@ -1336,6 +1545,7 @@ const WrapperFilter = styled("div", {
   alignItems: "center",
   justifyContent: "flex-start",
   height: "auto",
+  width: "100%",
   padding: theme.spacing(1.5),
   borderRadius: theme.spacing(1),
   border: inEdition ? `1px solid ${theme.palette.primary.main}` : `1px solid ${theme.palette.divider}`
@@ -1352,16 +1562,16 @@ const WrapperFilterMobile = styled("div", {
   justifyContent: "space-between",
   minWidth: theme.spacing(25),
   height: "auto",
+  width: "100%",
   padding: theme.spacing(1.5),
   borderRadius: theme.spacing(1),
   border: inEdition ? `1px solid ${theme.palette.primary.main}` : `1px solid ${theme.palette.divider}`,
   gap: theme.spacing(1.5)
 }));
-const ContainerFistRow = styled("div")(({
-  theme
-}) => ({
+const ContainerFistRow = styled("div")(() => ({
+  width: "100%",
   display: "flex",
-  width: "100%"
+  justifyContent: "space-between"
 }));
 const DynamicFilter = (props) => {
   const isDesktop = useResponsiveDesktop();