datastake-daf 0.6.413 → 0.6.415

package/dist/components/index.js

@@ -13276,16 +13276,9 @@ DAFFooter.propTypes = {
 };
 
 const PAGE_HEIGHT = 1587;
+// margin-top: 20, bottom: 20;
 const FOOTER_HEIGHT = 70;
 const HEADER_HEIGHT = 100;
-const SECTION_SPACING = 24; // Space between sections
-const FIRST_PAGE_TOP_PADDING = 30; // Padding after header on first page
-const NEW_PAGE_TOP_PADDING = 30; // Padding after header on new pages
-const LAST_SECTION_BOTTOM_PADDING = 30; // Padding after last section
-const PAGE_BOTTOM_MARGIN = 30; // Safety margin before footer
-
-// Available content height per page (excluding header, footer, and safety margins)
-const AVAILABLE_HEIGHT = PAGE_HEIGHT - HEADER_HEIGHT - FOOTER_HEIGHT - PAGE_BOTTOM_MARGIN;
 const Row = _ref => {
   let {
     widgets,
@@ -13310,7 +13303,7 @@ const Row = _ref => {
         ref
       });
     }
-  }, [height, i, onChangeHeight]);
+  }, [height]);
   return /*#__PURE__*/jsxRuntime.jsx("section", {
     ref: ref,
     style: widgets.style,
@@ -13332,75 +13325,51 @@ function PdfView(_ref2) {
   const [pages, setPages] = React.useState([1]);
   const doSizing = React.useCallback(() => {
     const keys = Object.keys(sectionsConfig);
-
-    // Wait until all sections have been measured
-    if (keys.length !== config.length) return;
     let _pages = [1];
-    let currentPage = 1;
-    let currentPageContentHeight = 0; // Tracks content height on current page (excluding header)
-
-    // Reset all styles first
-    keys.forEach(k => {
-      const {
-        ref
-      } = sectionsConfig[k];
-      ref.current.style.marginTop = '0px';
-      ref.current.style.marginBottom = '0px';
-      ref.current.style.paddingBottom = '0px';
-    });
-    keys.forEach((k, i) => {
-      const {
-        height,
-        ref
-      } = sectionsConfig[k];
-      const isFirstSection = i === 0;
-      const isLastSection = i === keys.length - 1;
-      const isFirstSectionOnPage = currentPageContentHeight === 0;
-
-      // For first section of entire document
-      if (isFirstSection) {
-        ref.current.style.marginTop = "".concat(HEADER_HEIGHT + FIRST_PAGE_TOP_PADDING, "px");
-        currentPageContentHeight = height + FIRST_PAGE_TOP_PADDING;
-        if (isLastSection) {
-          ref.current.style.paddingBottom = "".concat(LAST_SECTION_BOTTOM_PADDING, "px");
-          currentPageContentHeight += LAST_SECTION_BOTTOM_PADDING;
+    let _page = 1;
+    if (keys.length === config.length) {
+      let incrHeight = 0;
+      keys.forEach(k => {
+        const {
+          ref
+        } = sectionsConfig[k];
+        ref.current.style.marginBottom = '0px';
+        // ref.current.style.marginTop = '15px';
+      });
+      keys.forEach((k, i) => {
+        const {
+          height,
+          ref
+        } = sectionsConfig[k];
+        if (i === 0) {
+          ref.current.style.marginTop = "".concat(HEADER_HEIGHT, "px");
+          incrHeight += HEADER_HEIGHT;
+        }
+        const newHeight = incrHeight + height;
+        if (i === keys.length - 1) {
+          ref.current.style.paddingBottom = '30px';
+        }
+        if (newHeight > PAGE_HEIGHT - 30 - FOOTER_HEIGHT - HEADER_HEIGHT) {
+          const dif = Math.abs(PAGE_HEIGHT - incrHeight);
+          ref.current.style.marginTop = '30px';
+          _page += 1;
+          _pages.push(_page);
+          if (sectionsConfig[keys[i - 1]]) {
+            const {
+              ref: topRef
+            } = sectionsConfig[keys[i - 1]];
+            topRef.current.style.marginBottom = "".concat(dif + HEADER_HEIGHT - 24, "px");
+            incrHeight = height + 24 + HEADER_HEIGHT;
+            // console.log('margin', dif);
+          }
+        } else {
+          incrHeight = newHeight + 24;
         }
-        return;
-      }
-
-      // Calculate space needed for this section including spacing before it
-      const spacingBefore = isFirstSectionOnPage ? NEW_PAGE_TOP_PADDING : SECTION_SPACING;
-      const bottomPadding = isLastSection ? LAST_SECTION_BOTTOM_PADDING : 0;
-      const totalSpaceNeeded = spacingBefore + height + bottomPadding;
-
-      // Check if we need to move to next page
-      if (currentPageContentHeight + totalSpaceNeeded > AVAILABLE_HEIGHT) {
-        // Move to new page
-        currentPage += 1;
-        _pages.push(currentPage);
-
-        // Calculate and apply bottom margin to fill previous page
-        const usedSpace = currentPageContentHeight;
-        const remainingSpace = AVAILABLE_HEIGHT - usedSpace;
-        const previousKey = keys[i - 1];
-        sectionsConfig[previousKey].ref.current.style.marginBottom = "".concat(remainingSpace + PAGE_BOTTOM_MARGIN, "px");
-
-        // This section starts the new page
-        ref.current.style.marginTop = "".concat(HEADER_HEIGHT + NEW_PAGE_TOP_PADDING, "px");
-        currentPageContentHeight = height + NEW_PAGE_TOP_PADDING + bottomPadding;
-      } else {
-        // Section fits on current page
-        ref.current.style.marginTop = "".concat(spacingBefore, "px");
-        currentPageContentHeight += totalSpaceNeeded;
-      }
-
-      // Add bottom padding to last section
-      if (isLastSection) {
-        ref.current.style.paddingBottom = "".concat(LAST_SECTION_BOTTOM_PADDING, "px");
-      }
-    });
-    setPages(_pages);
-  }, [sectionsConfig, config.length]);
+        // console.groupEnd();
+      });
+      setPages(_pages);
+    }
+  }, [sectionsConfig]);
   React.useEffect(() => {
     doSizing();
   }, [doSizing]);
@@ -13421,22 +13390,32 @@ function PdfView(_ref2) {
             widgets: widgets,
             i: i,
             onChangeHeight: onChangeHeight
-          }, "dashboard-sections-".concat(i + 1)))
+          }, "dashboard-sections=".concat(i + 1)))
         })
       })
     });
   }, [config, onChangeHeight]);
+
+  // <div className="daf-analysis">
+  // <Header title={t('Dashboard Title')} />
+
+  // <div className="content">
+  //   <div className="view-content">
+  //     <div className="daf-analysis-layout">
+  //       <div className='sections-cont w-pt'>
+  //         <section>
+
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: contClassName,
     style: {
       position: 'relative'
     },
-    children: [renderDashboard(), pages.map(page => /*#__PURE__*/jsxRuntime.jsxs("div", {
+    children: [renderDashboard(), pages.map(page => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         style: {
           top: (page - 1) * PAGE_HEIGHT,
           width: '100%',
-          height: HEADER_HEIGHT,
+          height: HEADER_HEIGHT - 24,
           position: 'absolute',
           left: 0,
           zIndex: 1000000
@@ -13454,7 +13433,7 @@ function PdfView(_ref2) {
             alt: "logo"
           })
         })]
-      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      }, "headers-".concat(page)), /*#__PURE__*/jsxRuntime.jsxs("div", {
         style: {
           top: page * PAGE_HEIGHT - FOOTER_HEIGHT,
           width: '100%',
@@ -13497,8 +13476,8 @@ function PdfView(_ref2) {
             children: page
           })
         })]
-      })]
-    }, "page-".concat(page)))]
+      }, "footers-".concat(page))]
+    }))]
   });
 }
 PdfView.propTypes = {
@@ -13508,8 +13487,7 @@ PdfView.propTypes = {
   imgSrc: PropTypes__default["default"].string,
   userId: PropTypes__default["default"].string,
   accountId: PropTypes__default["default"].string,
-  documentId: PropTypes__default["default"].string,
-  downloadId: PropTypes__default["default"].string
+  documentId: PropTypes__default["default"].string
 };
 
 const ajaxSelectFieldData = async (value, config, getApiBaseUrl = () => {}, getAppHeader = () => {}, app, formValues = {}) => {
@@ -22145,7 +22123,34 @@ const WidgetCard = _ref => {
           children: /*#__PURE__*/jsxRuntime.jsx("a", {
             className: formatClassname(["widget-card-logo-icon", (buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.disabled) && "disabled-anchor"]),
             href: buttonConfig !== null && buttonConfig !== void 0 && buttonConfig.disabled ? undefined : link,
-            onClick: buttonConfig !== null && buttonConfig !== void 0 && buttonConfig.disabled ? e => e.preventDefault() : undefined,
+            onClick: e => {
+              if (buttonConfig !== null && buttonConfig !== void 0 && buttonConfig.disabled) {
+                e.preventDefault();
+              } else if (buttonConfig !== null && buttonConfig !== void 0 && buttonConfig.onClick) {
+                e.preventDefault();
+                buttonConfig.onClick();
+              } else if (buttonConfig !== null && buttonConfig !== void 0 && buttonConfig.action) {
+                e.preventDefault();
+                // Handle different action types
+                switch (buttonConfig.action.type) {
+                  case 'modal':
+                    if (buttonConfig.action.onOpen) {
+                      buttonConfig.action.onOpen();
+                    }
+                    break;
+                  case 'navigate':
+                    if (buttonConfig.action.url) {
+                      window.location.href = buttonConfig.action.url;
+                    }
+                    break;
+                  case 'custom':
+                    if (buttonConfig.action.handler) {
+                      buttonConfig.action.handler();
+                    }
+                    break;
+                }
+              }
+            },
             children: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
               name: buttonIcon,
               size: 16,

package/dist/style/datastake/mapbox-gl.css

@@ -0,0 +1,330 @@
+/* Isolated Mapbox GL CSS - Scoped to prevent Leaflet conflicts */
+
+/* Mapbox GL Core Styles - Scoped with .mapbox-gl-scope */
+.mapbox-gl-scope .mapboxgl-map {
+  font: 12px/20px Helvetica Neue, Arial, Helvetica, sans-serif;
+  overflow: hidden;
+  position: relative;
+  -webkit-tap-highlight-color: rgb(0 0 0/0);
+}
+
+.mapbox-gl-scope .mapboxgl-canvas {
+  left: 0;
+  position: absolute;
+  top: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-map:-webkit-full-screen {
+  height: 100%;
+  width: 100%;
+}
+
+.mapbox-gl-scope .mapboxgl-canary {
+  background-color: salmon;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-interactive,
+.mapbox-gl-scope .mapboxgl-ctrl-group button.mapboxgl-ctrl-compass {
+  cursor: grab;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-track-pointer {
+  cursor: pointer;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-interactive:active,
+.mapbox-gl-scope .mapboxgl-ctrl-group button.mapboxgl-ctrl-compass:active {
+  cursor: grabbing;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate,
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate .mapboxgl-canvas {
+  touch-action: pan-x pan-y;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-drag-pan,
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-drag-pan .mapboxgl-canvas {
+  touch-action: pinch-zoom;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas {
+  touch-action: none;
+}
+
+/* Control positioning */
+.mapbox-gl-scope .mapboxgl-ctrl-bottom,
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-left,
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-right,
+.mapbox-gl-scope .mapboxgl-ctrl-left,
+.mapbox-gl-scope .mapboxgl-ctrl-right,
+.mapbox-gl-scope .mapboxgl-ctrl-top,
+.mapbox-gl-scope .mapboxgl-ctrl-top-left,
+.mapbox-gl-scope .mapboxgl-ctrl-top-right {
+  pointer-events: none;
+  position: absolute;
+  z-index: 2;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top-left {
+  left: 0;
+  top: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top {
+  left: 50%;
+  top: 0;
+  transform: translateX(-50%);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top-right {
+  right: 0;
+  top: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-right {
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-right {
+  bottom: 0;
+  right: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-left {
+  bottom: 0;
+  left: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-left {
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl {
+  clear: both;
+  pointer-events: auto;
+  transform: translate(0);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top-left .mapboxgl-ctrl {
+  float: left;
+  margin: 10px 0 0 10px;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top .mapboxgl-ctrl {
+  float: left;
+  margin: 10px 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top-right .mapboxgl-ctrl {
+  float: right;
+  margin: 10px 10px 0 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl,
+.mapbox-gl-scope .mapboxgl-ctrl-right .mapboxgl-ctrl {
+  float: right;
+  margin: 0 10px 10px 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom .mapboxgl-ctrl {
+  float: left;
+  margin: 10px 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl,
+.mapbox-gl-scope .mapboxgl-ctrl-left .mapboxgl-ctrl {
+  float: left;
+  margin: 0 0 10px 10px;
+}
+
+/* Control group styling */
+.mapbox-gl-scope .mapboxgl-ctrl-group {
+  background: #fff;
+  border-radius: 4px;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group:not(:empty) {
+  box-shadow: 0 0 0 2px #0000001a;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button {
+  background-color: initial;
+  border: 0;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: block;
+  height: 29px;
+  outline: none;
+  overflow: hidden;
+  padding: 0;
+  width: 29px;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button+button {
+  border-top: 1px solid #ddd;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl button .mapboxgl-ctrl-icon {
+  background-position: 50%;
+  background-repeat: no-repeat;
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-attrib-button:focus,
+.mapbox-gl-scope .mapboxgl-ctrl-group button:focus {
+  box-shadow: 0 0 2px 2px #0096ff;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl button:disabled {
+  cursor: not-allowed;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl button:disabled .mapboxgl-ctrl-icon {
+  opacity: .25;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button:first-child {
+  border-radius: 4px 4px 0 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button:last-child {
+  border-radius: 0 0 4px 4px;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button:only-child {
+  border-radius: inherit;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl button:not(:disabled):hover {
+  background-color: #0000000d;
+}
+
+/* Marker styles */
+.mapbox-gl-scope .mapboxgl-marker {
+  position: absolute;
+  z-index: 1;
+}
+
+.mapbox-gl-scope .mapboxgl-marker svg {
+  display: block;
+}
+
+/* Popup styles */
+.mapbox-gl-scope .mapboxgl-popup {
+  position: absolute;
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-content-wrapper {
+  padding: 1px;
+  text-align: left;
+  border-radius: 12px;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-content {
+  margin: 13px 24px 13px 20px;
+  line-height: 1.3;
+  font-size: 13px;
+  min-height: 1px;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-content p {
+  margin: 17px 0;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-tip-container {
+  width: 40px;
+  height: 20px;
+  position: absolute;
+  left: 50%;
+  margin-top: -1px;
+  margin-left: -20px;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-tip {
+  width: 17px;
+  height: 17px;
+  padding: 1px;
+  margin: -10px auto 0;
+  pointer-events: auto;
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+.mapbox-gl-scope .mapboxgl-popup-content-wrapper,
+.mapbox-gl-scope .mapboxgl-popup-tip {
+  background: white;
+  color: #333;
+  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
+}
+
+.mapbox-gl-scope .mapboxgl-popup-close-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  border: none;
+  text-align: center;
+  width: 24px;
+  height: 24px;
+  font: 16px/24px Tahoma, Verdana, sans-serif;
+  color: #757575;
+  text-decoration: none;
+  background: transparent;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-close-button:hover,
+.mapbox-gl-scope .mapboxgl-popup-close-button:focus {
+  color: #585858;
+}
+
+/* Attribution */
+.mapbox-gl-scope .mapboxgl-ctrl-attribution {
+  background: #fff;
+  background: rgba(255, 255, 255, 0.8);
+  margin: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-attribution,
+.mapbox-gl-scope .mapboxgl-ctrl-scale-line {
+  padding: 0 5px;
+  color: #333;
+  line-height: 1.4;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-attribution a {
+  text-decoration: none;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-attribution a:hover,
+.mapbox-gl-scope .mapboxgl-ctrl-attribution a:focus {
+  text-decoration: underline;
+}
+
+/* Hide attribution by default */
+.mapbox-gl-scope .mapboxgl-ctrl-attribution {
+  display: none !important;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-logo {
+  display: none !important;
+}

package/package.json

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

package/src/@daf/core/components/Dashboard/PdfView/index.jsx

@@ -4,16 +4,9 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { formatClassname } from "../../../../../helpers/ClassesHelper";
 
 const PAGE_HEIGHT = 1587;
+// margin-top: 20, bottom: 20;
 const FOOTER_HEIGHT = 70;
 const HEADER_HEIGHT = 100;
-const SECTION_SPACING = 24; // Space between sections
-const FIRST_PAGE_TOP_PADDING = 30; // Padding after header on first page
-const NEW_PAGE_TOP_PADDING = 30; // Padding after header on new pages
-const LAST_SECTION_BOTTOM_PADDING = 30; // Padding after last section
-const PAGE_BOTTOM_MARGIN = 30; // Safety margin before footer
-
-// Available content height per page (excluding header, footer, and safety margins)
-const AVAILABLE_HEIGHT = PAGE_HEIGHT - HEADER_HEIGHT - FOOTER_HEIGHT - PAGE_BOTTOM_MARGIN;
 
 const Row = ({ widgets, i, onChangeHeight = () => { } }) => {
   const ref = useRef();
@@ -35,7 +28,7 @@ const Row = ({ widgets, i, onChangeHeight = () => { } }) => {
     if (height) {
       onChangeHeight(i, { height, ref });
     }
-  }, [height, i, onChangeHeight])
+  }, [height])
 
   return (
     <section ref={ref} style={widgets.style}>
@@ -59,74 +52,52 @@ export default function PdfView({
 
   const doSizing = useCallback(() => {
     const keys = Object.keys(sectionsConfig);
-    
-    // Wait until all sections have been measured
-    if (keys.length !== config.length) return;
-
     let _pages = [1];
-    let currentPage = 1;
-    let currentPageContentHeight = 0; // Tracks content height on current page (excluding header)
-
-    // Reset all styles first
-    keys.forEach(k => {
-      const { ref } = sectionsConfig[k];
-      ref.current.style.marginTop = '0px';
-      ref.current.style.marginBottom = '0px';
-      ref.current.style.paddingBottom = '0px';
-    });
+    let _page = 1;
+
+    if (keys.length === config.length) {
+      let incrHeight = 0;
+
+      keys.forEach(k => {
+        const { ref } = sectionsConfig[k];
+        ref.current.style.marginBottom = '0px';
+        // ref.current.style.marginTop = '15px';
+      })
 
-    keys.forEach((k, i) => {
-      const { height, ref } = sectionsConfig[k];
-      const isFirstSection = i === 0;
-      const isLastSection = i === keys.length - 1;
-      const isFirstSectionOnPage = currentPageContentHeight === 0;
-
-      // For first section of entire document
-      if (isFirstSection) {
-        ref.current.style.marginTop = `${HEADER_HEIGHT + FIRST_PAGE_TOP_PADDING}px`;
-        currentPageContentHeight = height + FIRST_PAGE_TOP_PADDING;
-        
-        if (isLastSection) {
-          ref.current.style.paddingBottom = `${LAST_SECTION_BOTTOM_PADDING}px`;
-          currentPageContentHeight += LAST_SECTION_BOTTOM_PADDING;
+      keys.forEach((k, i) => {
+        const { height, ref } = sectionsConfig[k];
+
+        if (i === 0) {
+          ref.current.style.marginTop = `${HEADER_HEIGHT}px`;
+          incrHeight += HEADER_HEIGHT;
         }
-        return;
-      }
 
-      // Calculate space needed for this section including spacing before it
-      const spacingBefore = isFirstSectionOnPage ? NEW_PAGE_TOP_PADDING : SECTION_SPACING;
-      const bottomPadding = isLastSection ? LAST_SECTION_BOTTOM_PADDING : 0;
-      const totalSpaceNeeded = spacingBefore + height + bottomPadding;
-
-      // Check if we need to move to next page
-      if (currentPageContentHeight + totalSpaceNeeded > AVAILABLE_HEIGHT) {
-        // Move to new page
-        currentPage += 1;
-        _pages.push(currentPage);
-        
-        // Calculate and apply bottom margin to fill previous page
-        const usedSpace = currentPageContentHeight;
-        const remainingSpace = AVAILABLE_HEIGHT - usedSpace;
-        const previousKey = keys[i - 1];
-        sectionsConfig[previousKey].ref.current.style.marginBottom = `${remainingSpace + PAGE_BOTTOM_MARGIN}px`;
-        
-        // This section starts the new page
-        ref.current.style.marginTop = `${HEADER_HEIGHT + NEW_PAGE_TOP_PADDING}px`;
-        currentPageContentHeight = height + NEW_PAGE_TOP_PADDING + bottomPadding;
-      } else {
-        // Section fits on current page
-        ref.current.style.marginTop = `${spacingBefore}px`;
-        currentPageContentHeight += totalSpaceNeeded;
-      }
+        const newHeight = incrHeight + height;
 
-      // Add bottom padding to last section
-      if (isLastSection) {
-        ref.current.style.paddingBottom = `${LAST_SECTION_BOTTOM_PADDING}px`;
-      }
-    });
+        if (i === keys.length - 1) {
+          ref.current.style.paddingBottom = '30px';
+        }
 
-    setPages(_pages);
-  }, [sectionsConfig, config.length]);
+        if (newHeight > PAGE_HEIGHT - 30 - FOOTER_HEIGHT - HEADER_HEIGHT) {
+          const dif = Math.abs(PAGE_HEIGHT - incrHeight);
+          ref.current.style.marginTop = '30px';
+          _page += 1;
+          _pages.push(_page);
+
+          if (sectionsConfig[keys[i - 1]]) {
+            const { ref: topRef } = sectionsConfig[keys[i - 1]];
+            topRef.current.style.marginBottom = `${dif + HEADER_HEIGHT - 24}px`;
+            incrHeight = height + 24 + HEADER_HEIGHT;
+            // console.log('margin', dif);
+          }
+        } else {
+          incrHeight = newHeight + 24;
+        }
+        // console.groupEnd();
+      })
+      setPages(_pages);
+    }
+  }, [sectionsConfig]);
 
   useEffect(() => {
     doSizing();
@@ -146,7 +117,7 @@ export default function PdfView({
             {config.map((widgets, i) => (
               <Row
                 widgets={widgets}
-                key={`dashboard-sections-${i + 1}`}
+                key={`dashboard-sections=${i + 1}`}
                 i={i}
                 onChangeHeight={onChangeHeight}
               />
@@ -157,20 +128,23 @@ export default function PdfView({
     );
   }, [config, onChangeHeight]);
 
+  // <div className="daf-analysis">
+  // <Header title={t('Dashboard Title')} />
+
+  // <div className="content">
+  //   <div className="view-content">
+  //     <div className="daf-analysis-layout">
+  //       <div className='sections-cont w-pt'>
+  //         <section>
+
   return (
     <div className={contClassName} style={{ position: 'relative' }}>
       {renderDashboard()}
       {pages.map((page) => (
-        <div key={`page-${page}`}>
+        <>
           <div
-            style={{ 
-              top: ((page - 1) * PAGE_HEIGHT), 
-              width: '100%', 
-              height: HEADER_HEIGHT, 
-              position: 'absolute', 
-              left: 0, 
-              zIndex: 1000000 
-            }}
+            style={{ top: ((page - 1) * PAGE_HEIGHT), width: '100%', height: HEADER_HEIGHT - 24, position: 'absolute', left: 0, zIndex: 1000000 }}
+            key={`headers-${page}`}
             className="flex-row dashboard-header"
           >
             <div className="flex flex-column justify-center flex-1">
@@ -181,14 +155,8 @@ export default function PdfView({
             </div>
           </div>
           <div
-            style={{ 
-              top: (page * PAGE_HEIGHT) - FOOTER_HEIGHT, 
-              width: '100%', 
-              height: FOOTER_HEIGHT, 
-              position: 'absolute', 
-              left: 0, 
-              zIndex: 1000000 
-            }}
+            style={{ top: (page * PAGE_HEIGHT) - FOOTER_HEIGHT, width: '100%', height: FOOTER_HEIGHT, position: 'absolute', left: 0, zIndex: 1000000 }}
+            key={`footers-${page}`}
             className="dashboard-footer flex-row"
           >
             <div className="flex flex-column justify-center">
@@ -222,7 +190,7 @@ export default function PdfView({
               <h5>{page}</h5>
             </div>
           </div>
-        </div>
+        </>
       ))}
     </div>
   );
@@ -236,5 +204,4 @@ PdfView.propTypes = {
   userId: PropTypes.string,
   accountId: PropTypes.string,
   documentId: PropTypes.string,
-  downloadId: PropTypes.string,
-}
+}

package/src/@daf/core/components/Dashboard/Widget/WidgetCard/index.js

@@ -8,31 +8,31 @@ import { formatClassname } from '../../../../../../helpers/ClassesHelper.js'
 const { useToken } = theme;
 
 const WidgetCard = ({
-    title, 
+    title,
     backgroundColor,
     backgroundBorderColor,
-    data = [], 
-    link, 
-    logoIcon, 
-    description, 
-    loading=false, 
-    iconColor, 
+    data = [],
+    link,
+    logoIcon,
+    description,
+    loading = false,
+    iconColor,
     buttonIcon,
     imageUrl,
     buttonConfig = {},
     width,
-    t = () => {},
+    t = () => { },
 }) => {
     const { token } = useToken();
     return (
         <Style backgroundColor={backgroundColor} backgroundBorderColor={backgroundBorderColor} width={width}>
             <Widget
                 title={
-                    <div style={{display: "flex", alignItems: "center"}}>
-                        {imageUrl ? <img src={imageUrl} className="widget-card-logo-icon mr-2" /> 
+                    <div style={{ display: "flex", alignItems: "center" }}>
+                        {imageUrl ? <img src={imageUrl} className="widget-card-logo-icon mr-2" />
                             : <div className="widget-card-logo-icon mr-2">
                                 <CustomIcon name={logoIcon} width={25} height={25} />
-                            </div> 
+                            </div>
                         }
                         <Tooltip title={title}>{title}</Tooltip>
                     </div>
@@ -41,12 +41,41 @@ const WidgetCard = ({
                     <>
                         <div className="flex-1" />
                         <Tooltip title={buttonConfig?.disabled ? (buttonConfig?.tooltipText || t("Currently unavailable")) : ""}>
-                            <a 
-                                className={formatClassname(["widget-card-logo-icon", buttonConfig?.disabled && "disabled-anchor"])} 
+                            <a
+                                className={formatClassname(["widget-card-logo-icon", buttonConfig?.disabled && "disabled-anchor"])}
                                 href={buttonConfig?.disabled ? undefined : link}
-                                onClick={buttonConfig?.disabled ? (e) => e.preventDefault() : undefined}
+                                onClick={(e) => {
+                                    if (buttonConfig?.disabled) {
+                                        e.preventDefault();
+                                    } else if (buttonConfig?.onClick) {
+                                        e.preventDefault();
+                                        buttonConfig.onClick();
+                                    } else if (buttonConfig?.action) {
+                                        e.preventDefault();
+                                        // Handle different action types
+                                        switch (buttonConfig.action.type) {
+                                            case 'modal':
+                                                if (buttonConfig.action.onOpen) {
+                                                    buttonConfig.action.onOpen();
+                                                }
+                                                break;
+                                            case 'navigate':
+                                                if (buttonConfig.action.url) {
+                                                    window.location.href = buttonConfig.action.url;
+                                                }
+                                                break;
+                                            case 'custom':
+                                                if (buttonConfig.action.handler) {
+                                                    buttonConfig.action.handler();
+                                                }
+                                                break;
+                                            default:
+                                                break;
+                                        }
+                                    }
+                                }}
                             >
-                                <CustomIcon  name={buttonIcon} size={16} color={buttonConfig?.disabled ? "#6C737F" : (iconColor || theme.colorPrimary)} />
+                                <CustomIcon name={buttonIcon} size={16} color={buttonConfig?.disabled ? "#6C737F" : (iconColor || theme.colorPrimary)} />
                             </a>
                         </Tooltip>
                     </>
@@ -54,21 +83,21 @@ const WidgetCard = ({
                 loading={loading}
                 className="with-tabs no-pt-body"
             >
-                <div style={{display: "flex", flexDirection: "column", height: "100%", marginTop: "0px"}}>
+                <div style={{ display: "flex", flexDirection: "column", height: "100%", marginTop: "0px" }}>
                     <div style={{
                         display: "flex",
                         flexDirection: "column",
                         justifyContent: "flex-start",
                         marginTop: "10px",
                         marginBottom: "24px",
-                        minHeight: "0" 
+                        minHeight: "0"
                     }}>
                         {description ? (
                             <p style={{
-                                margin: 0, 
+                                margin: 0,
                                 height: "45px",
                                 display: "-webkit-box",
-                                WebkitLineClamp: 3, 
+                                WebkitLineClamp: 3,
                                 WebkitBoxOrient: "vertical",
                                 overflow: "hidden",
                                 textOverflow: "ellipsis",
@@ -79,16 +108,16 @@ const WidgetCard = ({
                                 {description.length > 100 ? <Tooltip title={description}>{description.substring(0, 100)}...</Tooltip> : description}
                             </p>
                         ) : (
-                            <div style={{height: "45px"}} /> 
+                            <div style={{ height: "45px" }} />
                         )}
                     </div>
-                    
+
                     {data && data.length > 0 && (
-                        <div style={{display: "flex", flexDirection: "column", gap: "8px"}}>
+                        <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
                             {data.map((item) => (
-                                <div key={item} style={{display: "flex", justifyContent: "space-between"}}>
-                                    {item.isTag ? <Tag style={{width: '90px', textAlign: 'center', borderRadius: '10px'}} color={item.tagColor || 'default'}>{item.label}</Tag> : <span>{item.label}</span>}
-                                    <span style={{fontSize: '12px', color: '#6C737F'}}>{item.value}</span>
+                                <div key={item} style={{ display: "flex", justifyContent: "space-between" }}>
+                                    {item.isTag ? <Tag style={{ width: '90px', textAlign: 'center', borderRadius: '10px' }} color={item.tagColor || 'default'}>{item.label}</Tag> : <span>{item.label}</span>}
+                                    <span style={{ fontSize: '12px', color: '#6C737F' }}>{item.value}</span>
                                 </div>
                             ))}
                         </div>