datastake-daf 0.6.170 → 0.6.172

package/dist/components/index.js

@@ -9859,7 +9859,8 @@ const SelectFilters = _ref => {
     apiUrl,
     t = s => s,
     language = 'en',
-    type = 'default'
+    type = 'default',
+    isHeader = false
   } = _ref;
   const [filters, setFilters] = React.useState(selectedFilters || {});
   const [initFilters, setInitFilters] = React.useState(selectedFilters || {});
@@ -9926,7 +9927,7 @@ const SelectFilters = _ref => {
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: formatClassname([className, 'daf-select-filters', type]),
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: formatClassname(['filters', entries.length === 0 && 'empty']),
+      className: formatClassname(['filters', entries.length === 0 && 'empty', isHeader && 'px-0 pt-1']),
       children: [/*#__PURE__*/jsxRuntime.jsx("div", {
         className: "filters-cont",
         children: entries.filter(_ref4 => {
@@ -9934,17 +9935,10 @@ const SelectFilters = _ref => {
           return !(typeof v.show === 'function' ? v.show(filters) : false);
         }).map((_ref5, i) => {
           let [k, v] = _ref5;
-          return /*#__PURE__*/jsxRuntime.jsxs("div", {
+          return /*#__PURE__*/jsxRuntime.jsx("div", {
             style: v.style,
             className: "cont",
-            children: [/*#__PURE__*/jsxRuntime.jsx("label", {
-              children: typeof v.label === 'function' ? v.label({
-                filters,
-                options,
-                t,
-                language
-              }) : t(v.label)
-            }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+            children: /*#__PURE__*/jsxRuntime.jsxs("div", {
               children: [v.type === 'select' && options[k] && /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
                 children: /*#__PURE__*/jsxRuntime.jsx(CustomSelect$1, {
                   config: v,
@@ -9983,7 +9977,7 @@ const SelectFilters = _ref => {
                   onChange: e => onChange(e.target.value, k)
                 })
               })]
-            })]
+            })
           }, i.toString());
         })
       }), showFilters && /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -12416,8 +12410,11 @@ const useHeader = _ref => {
     loading,
     renderExtraComponents,
     app = '',
-    isViewMode = false
+    isViewMode = false,
+    filtersConfig = {}
   } = _ref;
+  const [showFilters, setShowFilters] = React.useState(false);
+  const hasFilters = !!filtersConfig;
   const downloadButtonAction = app && app === 'sbg' && isViewMode ? null : {
     onClick: onDownload,
     disabled: downloadDisabled,
@@ -12437,7 +12434,16 @@ const useHeader = _ref => {
     noMinWidth: true,
     className: 'download-btn'
   };
-  const actionButtons = onDownload && _actionButtons.length < 3 ? [..._actionButtons, downloadButton] : _actionButtons;
+  const filterButton = [{
+    icon: 'Filter',
+    key: 'filters',
+    noMinWidth: true,
+    squareIconButton: true,
+    onClick: () => {
+      setShowFilters(p => !p);
+    }
+  }];
+  const actionButtons = onDownload && _actionButtons.length < 3 ? [..._actionButtons, ...(hasFilters ? filterButton : []), downloadButton] : _actionButtons;
   const extraButtons = onDownload && _actionButtons.length >= 3 ? [..._extraButtons, downloadButtonAction] : _extraButtons;
   const mainCont = React.useRef();
   const buttonCont = React.useRef();
@@ -12477,99 +12483,120 @@ const useHeader = _ref => {
   }, []);
   const maxWidth = React.useMemo(() => mainContWidth - buttonContWidth - 24, [mainContWidth, buttonContWidth]);
   const renderMainCont = () => /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: formatClassname(["main-cont flex", className]),
-    ref: mainCont,
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex-1 flex flex-column justify-content-center",
-      children: [typeof title === "string" ? /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: formatClassname(["title flex", hasSupportText && "mb-1"]),
-        style: {
-          maxWidth,
-          alignItems: "center"
-        },
-        children: [goBackTo && /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
-          className: "flex mr-xs no-min-width",
-          onClick: () => goBackTo(),
+      className: formatClassname(["main-cont flex", className]),
+      ref: mainCont,
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex-1 flex flex-column justify-content-center",
+        children: [typeof title === "string" ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: formatClassname(["title flex", hasSupportText && "mb-1"]),
           style: {
-            padding: 2,
-            height: "25px",
-            minWidth: "25px",
-            borderRadius: "4px",
-            opacity: loading ? 0 : 1
+            maxWidth,
+            alignItems: "center"
           },
-          children: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
-            name: "Right",
+          children: [goBackTo && /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
+            className: "flex mr-xs no-min-width",
+            onClick: () => goBackTo(),
+            style: {
+              padding: 2,
+              height: "25px",
+              minWidth: "25px",
+              borderRadius: "4px",
+              opacity: loading ? 0 : 1
+            },
+            children: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+              name: "Right",
+              style: {
+                transform: "rotate(180deg)",
+                width: "12px",
+                color: "var(--base-gray-70)"
+              }
+            })
+          }), loading ? /*#__PURE__*/jsxRuntime.jsx(antd.Skeleton, {
+            active: true,
+            title: false,
+            paragraph: {
+              rows: 1
+            },
             style: {
-              transform: "rotate(180deg)",
-              width: "12px",
-              color: "var(--base-gray-70)"
+              marginTop: '10px'
             }
-          })
-        }), loading ? /*#__PURE__*/jsxRuntime.jsx(antd.Skeleton, {
-          active: true,
-          title: false,
-          paragraph: {
-            rows: 1
-          },
-          style: {
-            marginTop: '10px'
-          }
-        }) : /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-          title: titleTooltip || title,
-          children: /*#__PURE__*/jsxRuntime.jsx("h2", {
-            className: formatClassname(["mb-0 mr-1", hasButtons && "limited"]),
-            children: title
-          })
-        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex",
-          children: [!!tooltip && /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "flex flex-column justify-content-center",
-            children: typeof tooltip === "string" ? /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-              title: tooltip,
-              children: /*#__PURE__*/jsxRuntime.jsx(Icons.InfoCircleOutlined, {})
-            }) : typeof tooltip === "object" ? /*#__PURE__*/jsxRuntime.jsx(antd.Popover, {
-              rootClassName: formatClassname(["header-tooltip", tooltip.className]),
-              title: tooltip.title,
-              content: tooltip.content,
-              children: /*#__PURE__*/jsxRuntime.jsx(Icons.InfoCircleOutlined, {})
-            }) : null
-          }), typeof renderExtraComponents === "function" ? renderExtraComponents() : null, hasTags && /*#__PURE__*/jsxRuntime.jsx(Tags, {
-            tags: tags
+          }) : /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+            title: titleTooltip || title,
+            children: /*#__PURE__*/jsxRuntime.jsx("h2", {
+              className: formatClassname(["mb-0 mr-1", hasButtons && "limited"]),
+              children: title
+            })
+          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex",
+            children: [!!tooltip && /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "flex flex-column justify-content-center",
+              children: typeof tooltip === "string" ? /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+                title: tooltip,
+                children: /*#__PURE__*/jsxRuntime.jsx(Icons.InfoCircleOutlined, {})
+              }) : typeof tooltip === "object" ? /*#__PURE__*/jsxRuntime.jsx(antd.Popover, {
+                rootClassName: formatClassname(["header-tooltip", tooltip.className]),
+                title: tooltip.title,
+                content: tooltip.content,
+                children: /*#__PURE__*/jsxRuntime.jsx(Icons.InfoCircleOutlined, {})
+              }) : null
+            }), typeof renderExtraComponents === "function" ? renderExtraComponents() : null, hasTags && /*#__PURE__*/jsxRuntime.jsx(Tags, {
+              tags: tags
+            })]
           })]
-        })]
-      }) : typeof title === "function" ? title(maxWidth) : title, /*#__PURE__*/jsxRuntime.jsx("div", {
-        style: {
-          marginLeft: goBackTo ? "33px" : 0
-        },
-        className: "support-text",
-        children: /*#__PURE__*/jsxRuntime.jsx(Paragraph, {
-          ellipsis: {
-            tooltip: supportText,
-            rows: 1
-          },
+        }) : typeof title === "function" ? title(maxWidth) : title, /*#__PURE__*/jsxRuntime.jsx("div", {
           style: {
-            maxWidth: maxWidth
+            marginLeft: goBackTo ? "33px" : 0
           },
-          children: supportText
-        })
-      })]
-    }), addedHeaderFirst ? /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex gap-2",
-      children: [addedHeader, hasButtons && /*#__PURE__*/jsxRuntime.jsx("div", {
-        ref: buttonCont,
-        children: /*#__PURE__*/jsxRuntime.jsx(Buttons, {
-          extraButtons: extraButtons,
-          actionButtons: actionButtons
-        })
+          className: "support-text",
+          children: /*#__PURE__*/jsxRuntime.jsx(Paragraph, {
+            ellipsis: {
+              tooltip: supportText,
+              rows: 1
+            },
+            style: {
+              maxWidth: maxWidth
+            },
+            children: supportText
+          })
+        })]
+      }), addedHeaderFirst ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex gap-2",
+        children: [addedHeader, hasButtons && /*#__PURE__*/jsxRuntime.jsx("div", {
+          ref: buttonCont,
+          children: /*#__PURE__*/jsxRuntime.jsx(Buttons, {
+            extraButtons: extraButtons,
+            actionButtons: actionButtons
+          })
+        })]
+      }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [hasButtons && /*#__PURE__*/jsxRuntime.jsx("div", {
+          ref: buttonCont,
+          children: /*#__PURE__*/jsxRuntime.jsx(Buttons, {
+            extraButtons: extraButtons,
+            actionButtons: actionButtons
+          })
+        }), addedHeader]
       })]
-    }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [hasButtons && /*#__PURE__*/jsxRuntime.jsx("div", {
-        ref: buttonCont,
-        children: /*#__PURE__*/jsxRuntime.jsx(Buttons, {
-          extraButtons: extraButtons,
-          actionButtons: actionButtons
-        })
-      }), addedHeader]
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      style: {
+        marginLeft: goBackTo ? "33px" : 0,
+        width: '100%'
+      },
+      children: hasFilters && /*#__PURE__*/jsxRuntime.jsx(SelectFilters, {
+        t: filtersConfig.t,
+        apiUrl: filtersConfig.apiUrl,
+        showFilters: showFilters,
+        onApply: filtersConfig.onApply,
+        options: filtersConfig.options,
+        setShowFilters: setShowFilters,
+        language: filtersConfig.language,
+        type: filtersConfig.type,
+        filtersConfig: filtersConfig.filtersConfig,
+        selectedFilters: filtersConfig.selectedFilters,
+        className: filtersConfig.className,
+        isHeader: true
+      })
     })]
   });
   return {
@@ -12693,7 +12720,8 @@ function DAFHeader(_ref) {
     loading,
     renderExtraComponents,
     app = "",
-    isViewMode = false
+    isViewMode = false,
+    filtersConfig = {}
   } = _ref;
   const showBreadcrumbs = !!breadcrumbs.length;
   const {
@@ -12715,7 +12743,8 @@ function DAFHeader(_ref) {
     loading,
     renderExtraComponents,
     app,
-    isViewMode
+    isViewMode,
+    filtersConfig
   });
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "daf-header",
@@ -12736,7 +12765,8 @@ DAFHeader.propTypes = {
   tags: PropTypes__default["default"].any,
   actionButtons: PropTypes__default["default"].array,
   extraButtons: PropTypes__default["default"].array,
-  downloadDisabled: PropTypes__default["default"].any
+  downloadDisabled: PropTypes__default["default"].any,
+  filtersConfig: PropTypes__default["default"].any
 };
 
 const _excluded$m = ["tabs", "onChange", "value", "className"];

package/dist/utils/index.js

@@ -4946,6 +4946,48 @@ dt.div`
   }
 `;
 
+({
+  value: PropTypes__default["default"].object,
+  filterSelectOptions: PropTypes__default["default"].func,
+  placeholder: PropTypes__default["default"].string,
+  onChange: PropTypes__default["default"].func,
+  disabled: PropTypes__default["default"].bool,
+  options: PropTypes__default["default"].any,
+  i: PropTypes__default["default"].number,
+  k: PropTypes__default["default"].string,
+  filters: PropTypes__default["default"].object,
+  config: PropTypes__default["default"].object
+});
+
+({
+  t: PropTypes__default["default"].func,
+  value: PropTypes__default["default"].string,
+  disabled: PropTypes__default["default"].bool,
+  onChange: PropTypes__default["default"].func
+});
+
+({
+  config: PropTypes__default["default"].object,
+  filters: PropTypes__default["default"].object,
+  k: PropTypes__default["default"].string,
+  setValue: PropTypes__default["default"].func,
+  isEdit: PropTypes__default["default"].bool,
+  placeholder: PropTypes__default["default"].string
+});
+
+({
+  t: PropTypes__default["default"].func,
+  onApply: PropTypes__default["default"].func,
+  options: PropTypes__default["default"].object,
+  className: PropTypes__default["default"].string,
+  showFilters: PropTypes__default["default"].bool,
+  setShowFilters: PropTypes__default["default"].func,
+  filtersConfig: PropTypes__default["default"].object,
+  selectedFilters: PropTypes__default["default"].object,
+  language: PropTypes__default["default"].string,
+  apiUrl: PropTypes__default["default"].string
+});
+
 ({
   tabs: PropTypes__default["default"].array,
   onChange: PropTypes__default["default"].func,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.170",
+	"version": "0.6.172",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

package/src/@daf/core/components/EditForm/_index.scss

@@ -164,7 +164,7 @@
       flex-direction: column;
       overflow-y: auto;
       height: 100%; // Ensure content takes full height
-      padding: 20px 20px 60px 20px; // Increased bottom padding for better scrolling
+      padding: 20px 20px 20px 20px; // Add bottom padding for better scrolling
 
       &.risk-template.no-padding {
         padding: 0;
@@ -354,7 +354,7 @@
       padding-top: var(--size-lg);
       overflow: auto;
       flex-direction: column;
-      padding: 20px 100px 60px 100px; // Added bottom padding for better scrolling
+      padding: 20px 100px 0 100px;
       &.has-section {
         width: calc(100% - 200px);
       }
@@ -1229,7 +1229,7 @@
       padding-top: var(--size-lg);
       overflow: auto;
       flex-direction: column;
-      padding: var(--size-lg) var(--size-lg) 60px var(--size-lg); // Added bottom padding for better scrolling
+      padding: var(--size-lg) var(--size-lg) 0 var(--size-lg);
 
       .main-form {
         min-width: 400px;

package/src/@daf/core/components/Filters/selectFilters/index.jsx

@@ -21,6 +21,7 @@ const SelectFilters = ({
   t = (s) => s,
   language = 'en',
   type = 'default',
+  isHeader = false,
 }) => {
   const [filters, setFilters] = useState(selectedFilters || {});
   const [initFilters, setInitFilters] = useState(selectedFilters || {})
@@ -101,17 +102,17 @@ const SelectFilters = ({
 
   return (
     <div className={formatClassname([className, 'daf-select-filters', type])}>
-      <div className={formatClassname(['filters', entries.length === 0 && 'empty'])}>
+      <div className={formatClassname(['filters', entries.length === 0 && 'empty', isHeader && 'px-0 pt-1'])}>
         <div className="filters-cont">
           {entries.filter(([, v]) => !(typeof v.show === 'function' ? v.show(filters) : false)).map(([k, v], i) => (
             <div key={i.toString()} style={v.style} className="cont">
-              <label>
+              {/* <label>
                 {
                   typeof v.label === 'function' ?
                     v.label({ filters, options, t, language })
                     : t(v.label)
                 }
-              </label>
+              </label> */}
               <div>
                 {(v.type === 'select' && options[k]) && (
                   <>

package/src/@daf/core/components/Header/Header.stories.js

@@ -97,3 +97,120 @@ export const Primary = {
 		addedHeaderFirst: true,
 	},
 };
+
+export const WithFilters = {
+	name: "Filters Header",
+	args: {
+		breadcrumbs: [
+			{
+				label: "Level 1",
+				onClick: () => {
+					alert(1);
+				},
+			},
+			{
+				label: "Level Level 2",
+				onClick: () => {
+					alert(2);
+				},
+			},
+			{
+				label: "Level Level Level 3",
+				onClick: () => {
+					alert(3);
+				},
+			},
+			{
+				label: "Level Level Level Level 4",
+				onClick: () => {
+					alert(4);
+				},
+			},
+			{
+				label: "Level Level Level Level Level 5",
+				onClick: () => {
+					alert(5);
+				},
+			},
+			{
+				label: "Level Level Level Level Level Level 6",
+				onClick: () => {
+					alert(6);
+				},
+			},
+		],
+		title: "GGGGGGGGGGGGGGGGGGG",
+		// supportText:
+		// 	"Supporting text (explanation, DS ID, etc..)Supporting text (explanation, DS ID, etc..)",
+		// tags: [
+		// 	{ color: "green", label: "Tag 1" },
+		// 	{ color: "green", label: "Tag 2" },
+		// 	{ color: "green", label: "Tag 3" },
+		// 	{ color: "green", label: "Tag 4" },
+		// 	{ color: "green", label: "Tag 5" },
+		// ],
+		loading: false,
+		// actionButtons: [
+		// 	{
+		// 		// label: "Primary",
+		// 		type: "primary",
+		// 		onClick: () => {},
+		// 		icon: "Edit",
+		// 		noMinWidth: true,
+		// 	},
+			// { onClick: () => {}, icon: "Edit", noMinWidth: true },
+		// ],
+		// extraButtons: [{ label: "Extra", onClick: () => {} }],
+		// goBackTo: () => {
+		// 	alert("Go back to this location");
+		// },
+		// renderExtraComponents: () => (
+		// 	<div
+		// 		style={{
+		// 			width: "100px",
+		// 			marginLeft: 30,
+		// 		}}
+		// 	>
+		// 		Extra
+		// 	</div>
+		// ),
+		addedHeader: "Added Header",
+		addedHeaderFirst: true,
+		filtersConfig: {
+			"language": "en",
+			"filtersConfig": {
+				"country": {
+					"type": "select",
+					"label": "Country",
+					"style": {
+						"flex": 1
+					},
+					"labelStyle": {
+						"flex": 1
+					},
+					"isMulti": true
+				}
+			},
+			"options": {
+				"country": [
+					{
+						"label": "Peru",
+						"value": "PE"
+					},
+					{
+						"label": "Colombia",
+						"value": "CO"
+					}
+				]
+			},
+			"selectedFilters": {
+				"country": [
+					"PE",
+					"CO"
+				]
+			},
+			"type": "small",
+			onApply: () => {}
+		}
+	},
+};

package/src/@daf/core/components/Header/hook.js

@@ -7,6 +7,7 @@ import { formatClassname } from '../../../../helpers/ClassesHelper'
 import CustomIcon from '../Icon/CustomIcon.jsx'
 import Loading from '../Loading/index.jsx'
 import { truncateString } from '../../../../helpers/StringHelper.js'
+import SelectFilters from '../Filters/selectFilters/index.jsx'
 
 const { Paragraph } = Typography
 
@@ -28,7 +29,10 @@ export const useHeader = ({
   renderExtraComponents,
   app = '',
   isViewMode = false,
+  filtersConfig = {},
 }) => {
+  const [showFilters, setShowFilters] = useState(false)
+  const hasFilters = !!filtersConfig
   const downloadButtonAction = app && app === 'sbg' && isViewMode ? null : {
     onClick: onDownload,
     disabled: downloadDisabled,
@@ -44,9 +48,20 @@ export const useHeader = ({
     noMinWidth: true,
     className: 'download-btn',
   }
+
+  const filterButton = [{
+    icon: 'Filter',
+    key: 'filters',
+    noMinWidth: true,
+    squareIconButton: true,
+    onClick: () => {
+      setShowFilters((p) => !p)
+    }
+  }]
   
   const actionButtons = onDownload && _actionButtons.length < 3 ? [
     ..._actionButtons,
+    ...(hasFilters ? filterButton : []),
     downloadButton
   ] : _actionButtons;
 
@@ -103,87 +118,107 @@ export const useHeader = ({
     mainContWidth - buttonContWidth - 24, [mainContWidth, buttonContWidth])
 
   const renderMainCont = () => (
-    <div className={formatClassname(["main-cont flex", className])} ref={mainCont}>
-      <div className="flex-1 flex flex-column justify-content-center">
-        {typeof title === "string" ? (
-          <div
-            className={formatClassname(["title flex", hasSupportText && "mb-1"])}
-            style={{ maxWidth, alignItems: "center" }}
-          >
-            {goBackTo && (
-              <Button
-                className="flex mr-xs no-min-width"
-                onClick={() => goBackTo()}
-                style={{ padding: 2, height: "25px", minWidth: "25px", borderRadius: "4px", opacity: loading ? 0 : 1 }}
+      <div>
+          <div className={formatClassname(["main-cont flex", className])} ref={mainCont}>
+          <div className="flex-1 flex flex-column justify-content-center">
+            {typeof title === "string" ? (
+              <div
+                className={formatClassname(["title flex", hasSupportText && "mb-1"])}
+                style={{ maxWidth, alignItems: "center" }}
               >
-                <CustomIcon
-                  name="Right"
-                  style={{
-                    transform: "rotate(180deg)",
-                    width: "12px",
-                    color: "var(--base-gray-70)",
-                  }}
-                />
-              </Button>
-            )}
-            {loading ? (
-              <Skeleton active title={false} paragraph={{ rows: 1 }} style={{ marginTop: '10px' }} />
+                {goBackTo && (
+                  <Button
+                    className="flex mr-xs no-min-width"
+                    onClick={() => goBackTo()}
+                    style={{ padding: 2, height: "25px", minWidth: "25px", borderRadius: "4px", opacity: loading ? 0 : 1 }}
+                  >
+                    <CustomIcon
+                      name="Right"
+                      style={{
+                        transform: "rotate(180deg)",
+                        width: "12px",
+                        color: "var(--base-gray-70)",
+                      }}
+                    />
+                  </Button>
+                )}
+                {loading ? (
+                  <Skeleton active title={false} paragraph={{ rows: 1 }} style={{ marginTop: '10px' }} />
+                ) : (
+                  <Tooltip title={titleTooltip || title}>
+                    <h2 className={formatClassname(["mb-0 mr-1", hasButtons && "limited"])}>{title}</h2>
+                  </Tooltip>
+                )}
+                <div className="flex">
+                  {!!tooltip && (
+                    <div className="flex flex-column justify-content-center">
+                      {typeof tooltip === "string" ? (
+                        <Tooltip title={tooltip}>
+                          <InfoCircleOutlined />
+                        </Tooltip>
+                      ) : typeof tooltip === "object" ? (
+                        <Popover
+                          rootClassName={formatClassname(["header-tooltip", tooltip.className])}
+                          title={tooltip.title}
+                          content={tooltip.content}
+                        >
+                          <InfoCircleOutlined />
+                        </Popover>
+                      ) : null}
+                    </div>
+                  )}
+                  {typeof renderExtraComponents === "function" ? renderExtraComponents() : null}
+                  {hasTags && <Tags tags={tags} />}
+                </div>
+              </div>
+            ) : typeof title === "function" ? (
+              title(maxWidth)
             ) : (
-              <Tooltip title={titleTooltip || title}>
-                <h2 className={formatClassname(["mb-0 mr-1", hasButtons && "limited"])}>{title}</h2>
-              </Tooltip>
+              title
             )}
-            <div className="flex">
-              {!!tooltip && (
-                <div className="flex flex-column justify-content-center">
-                  {typeof tooltip === "string" ? (
-                    <Tooltip title={tooltip}>
-                      <InfoCircleOutlined />
-                    </Tooltip>
-                  ) : typeof tooltip === "object" ? (
-                    <Popover
-                      rootClassName={formatClassname(["header-tooltip", tooltip.className])}
-                      title={tooltip.title}
-                      content={tooltip.content}
-                    >
-                      <InfoCircleOutlined />
-                    </Popover>
-                  ) : null}
-                </div>
-              )}
-              {typeof renderExtraComponents === "function" ? renderExtraComponents() : null}
-              {hasTags && <Tags tags={tags} />}
+            <div style={{ marginLeft: goBackTo ? "33px" : 0 }} className="support-text">
+              <Paragraph ellipsis={{ tooltip: supportText, rows: 1 }} style={{ maxWidth: maxWidth }}>
+                {supportText}
+              </Paragraph>
             </div>
           </div>
-        ) : typeof title === "function" ? (
-          title(maxWidth)
-        ) : (
-          title
-        )}
-        <div style={{ marginLeft: goBackTo ? "33px" : 0 }} className="support-text">
-          <Paragraph ellipsis={{ tooltip: supportText, rows: 1 }} style={{ maxWidth: maxWidth }}>
-            {supportText}
-          </Paragraph>
-        </div>
+          {addedHeaderFirst ?
+            <div className="flex gap-2">
+              {addedHeader}
+              {hasButtons && (
+                <div ref={buttonCont}>
+                  <Buttons extraButtons={extraButtons} actionButtons={actionButtons} />
+                </div>
+              )}
+            </div> :
+            <>
+              {hasButtons && (
+                <div ref={buttonCont}>
+                  <Buttons extraButtons={extraButtons} actionButtons={actionButtons} />
+                </div>
+              )}
+              {addedHeader}
+            </>
+          }
       </div>
-      {addedHeaderFirst ?
-        <div className="flex gap-2">
-          {addedHeader}
-          {hasButtons && (
-            <div ref={buttonCont}>
-              <Buttons extraButtons={extraButtons} actionButtons={actionButtons} />
-            </div>
-          )}
-        </div> :
-        <>
-          {hasButtons && (
-            <div ref={buttonCont}>
-              <Buttons extraButtons={extraButtons} actionButtons={actionButtons} />
-            </div>
-          )}
-          {addedHeader}
-        </>
-      }
+      <div style={{ marginLeft: goBackTo ? "33px" : 0, width: '100%' }}>
+          {hasFilters && (
+              <SelectFilters
+                t={filtersConfig.t}
+                apiUrl={filtersConfig.apiUrl}
+                showFilters={showFilters}
+                onApply={filtersConfig.onApply}
+                options={filtersConfig.options}
+                setShowFilters={setShowFilters}
+                language={filtersConfig.language}
+                type={filtersConfig.type}
+                filtersConfig={filtersConfig.filtersConfig}
+                selectedFilters={filtersConfig.selectedFilters}
+                className={filtersConfig.className}
+                isHeader={true}
+              />
+            )}
+        </div>
     </div>
   );
 

package/src/@daf/core/components/Header/index.jsx

@@ -92,7 +92,7 @@ export default function DAFHeader({
 	titleTooltip,
 	supportText = "",
 	tags = [],
-	addedHeader = null,
+	addedHeader = null, 
 	addedHeaderFirst = false,
 	actionButtons = [],
 	extraButtons = [],
@@ -103,6 +103,7 @@ export default function DAFHeader({
 	renderExtraComponents,
 	app = "",
 	isViewMode = false,
+	filtersConfig = {},
 }) {
 	const showBreadcrumbs = !!breadcrumbs.length;
 	const { renderMainCont, mainContWidth } = useHeader({
@@ -122,6 +123,7 @@ export default function DAFHeader({
 		renderExtraComponents,
 		app,
 		isViewMode,
+		filtersConfig,
 	});
 
 	return (
@@ -146,4 +148,5 @@ DAFHeader.propTypes = {
 	actionButtons: PropTypes.array,
 	extraButtons: PropTypes.array,
 	downloadDisabled: PropTypes.any,
+	filtersConfig: PropTypes.any,
 };

package/src/@daf/core/components/ViewForm/_index.scss

@@ -231,7 +231,7 @@
       display: flex;
       flex-direction: column;
       overflow-y: auto;
-      padding: var(--size-lg) var(--size-lg) 60px var(--size-lg); // Added bottom padding for better scrolling
+      padding: var(--size-lg) var(--size-lg) 0 var(--size-lg);
 
       &.no-padding {
         padding: 0px;