datastake-daf 0.6.415 → 0.6.417

package/dist/components/index.js

@@ -13276,9 +13276,15 @@ DAFFooter.propTypes = {
 };
 
 const PAGE_HEIGHT = 1587;
-// margin-top: 20, bottom: 20;
 const FOOTER_HEIGHT = 70;
 const HEADER_HEIGHT = 100;
+const SECTION_SPACING = 24;
+const TOP_PADDING = 30;
+const BOTTOM_PADDING = 30;
+
+// Calculate usable height per page
+const USABLE_HEIGHT = PAGE_HEIGHT - HEADER_HEIGHT - FOOTER_HEIGHT - TOP_PADDING - BOTTOM_PADDING;
+const SPLIT_THRESHOLD = USABLE_HEIGHT * 0.80;
 const Row = _ref => {
   let {
     widgets,
@@ -13303,7 +13309,7 @@ const Row = _ref => {
         ref
       });
     }
-  }, [height]);
+  }, [height, i, onChangeHeight]);
   return /*#__PURE__*/jsxRuntime.jsx("section", {
     ref: ref,
     style: widgets.style,
@@ -13325,51 +13331,92 @@ function PdfView(_ref2) {
   const [pages, setPages] = React.useState([1]);
   const doSizing = React.useCallback(() => {
     const keys = Object.keys(sectionsConfig);
+    if (keys.length !== config.length) return;
+
+    // Check if all refs are ready
+    const allRefsReady = keys.every(k => {
+      const {
+        ref
+      } = sectionsConfig[k];
+      return ref && ref.current;
+    });
+    if (!allRefsReady) return;
     let _pages = [1];
-    let _page = 1;
-    if (keys.length === config.length) {
-      let incrHeight = 0;
-      keys.forEach(k => {
-        const {
-          ref
-        } = sectionsConfig[k];
+    let currentPage = 1;
+    let remainingHeight = USABLE_HEIGHT;
+
+    // Reset all margins first
+    keys.forEach(k => {
+      const {
+        ref
+      } = sectionsConfig[k];
+      if (ref.current) {
+        ref.current.style.marginTop = '0px';
         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);
+        ref.current.style.paddingBottom = '0px';
+      }
+    });
+    keys.forEach((k, i) => {
+      const {
+        height,
+        ref
+      } = sectionsConfig[k];
+      if (!ref || !ref.current) return;
+      const isFirst = i === 0;
+      const isLast = i === keys.length - 1;
+      const startOfPageMargin = HEADER_HEIGHT + TOP_PADDING;
+
+      // First section of first page gets header spacing
+      if (isFirst) {
+        ref.current.style.marginTop = "".concat(startOfPageMargin, "px");
+        remainingHeight = USABLE_HEIGHT;
+      }
+
+      // Calculate space needed for this section (including spacing if not first on page)
+      const sectionTotalHeight = height + (isFirst || remainingHeight === USABLE_HEIGHT ? 0 : SECTION_SPACING);
+
+      // Check if adding this section would exceed the remaining height
+      const wouldExceedPage = sectionTotalHeight > remainingHeight;
+
+      // Check if the accumulated height on current page + this section exceeds 65% threshold
+      const currentPageUsed = USABLE_HEIGHT - remainingHeight;
+      const totalWithThisSection = currentPageUsed + sectionTotalHeight;
+      const wouldExceedThreshold = totalWithThisSection > SPLIT_THRESHOLD;
+      if (!isFirst && (wouldExceedPage || wouldExceedThreshold)) {
+        // Move to next page
+        const previousKey = keys[i - 1];
+        if (sectionsConfig[previousKey]) {
+          const {
+            ref: prevRef
+          } = sectionsConfig[previousKey];
+          if (prevRef && prevRef.current) {
+            // Add margin to push to next page
+            prevRef.current.style.marginBottom = "".concat(remainingHeight * 0.4 + HEADER_HEIGHT, "px");
           }
+        }
+
+        // Start new page - position after header and top padding
+        currentPage += 1;
+        _pages.push(currentPage);
+        ref.current.style.marginTop = "".concat(startOfPageMargin, "px");
+        remainingHeight = USABLE_HEIGHT - height;
+      } else {
+        // Section fits on current page
+        if (!isFirst && remainingHeight !== USABLE_HEIGHT) {
+          ref.current.style.marginTop = "".concat(SECTION_SPACING, "px");
+          remainingHeight -= height + SECTION_SPACING;
         } else {
-          incrHeight = newHeight + 24;
+          remainingHeight -= height;
         }
-        // console.groupEnd();
-      });
-      setPages(_pages);
-    }
-  }, [sectionsConfig]);
+      }
+
+      // Add padding to last section
+      if (isLast) {
+        ref.current.style.paddingBottom = "".concat(BOTTOM_PADDING, "px");
+      }
+    });
+    setPages(_pages);
+  }, [sectionsConfig, config.length]);
   React.useEffect(() => {
     doSizing();
   }, [doSizing]);
@@ -13390,27 +13437,17 @@ 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(jsxRuntime.Fragment, {
+    children: [renderDashboard(), pages.map(page => /*#__PURE__*/jsxRuntime.jsxs("div", {
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         style: {
           top: (page - 1) * PAGE_HEIGHT,
@@ -13433,7 +13470,7 @@ function PdfView(_ref2) {
             alt: "logo"
           })
         })]
-      }, "headers-".concat(page)), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
         style: {
           top: page * PAGE_HEIGHT - FOOTER_HEIGHT,
           width: '100%',
@@ -13476,8 +13513,8 @@ function PdfView(_ref2) {
             children: page
           })
         })]
-      }, "footers-".concat(page))]
-    }))]
+      })]
+    }, "page-".concat(page)))]
   });
 }
 PdfView.propTypes = {
@@ -13487,7 +13524,8 @@ PdfView.propTypes = {
   imgSrc: PropTypes__default["default"].string,
   userId: PropTypes__default["default"].string,
   accountId: PropTypes__default["default"].string,
-  documentId: PropTypes__default["default"].string
+  documentId: PropTypes__default["default"].string,
+  downloadId: PropTypes__default["default"].string
 };
 
 const ajaxSelectFieldData = async (value, config, getApiBaseUrl = () => {}, getAppHeader = () => {}, app, formValues = {}) => {
@@ -22123,34 +22161,7 @@ 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: 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;
-                }
-              }
-            },
+            onClick: buttonConfig !== null && buttonConfig !== void 0 && buttonConfig.disabled ? e => e.preventDefault() : undefined,
             children: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
               name: buttonIcon,
               size: 16,

package/dist/utils/index.js

@@ -3792,6 +3792,15 @@ const splitStringInMultipleLines = (s, limit = 20) => {
   if (line) result += line;
   return result;
 };
+const safeJsonParse = (value, fallback = value) => {
+  if (typeof value !== 'string') return value;
+  try {
+    return JSON.parse(value);
+  } catch {
+    console.warn('Failed to parse JSON:', value);
+    return fallback;
+  }
+};
 
 function _checkValue$1(wantedValue, match, fieldValue) {
   match = match ? match.trim() : null;
@@ -11398,6 +11407,7 @@ exports.renderTemplateString = renderTemplateString;
 exports.renderTemplateStringInObject = renderTemplateStringInObject;
 exports.renderTooltip = renderTooltip;
 exports.renderTooltipJsx = renderTooltipJsx;
+exports.safeJsonParse = safeJsonParse;
 exports.showHideInput = showHideInput;
 exports.snakeCaseToTitleCase = snakeCaseToTitleCase;
 exports.splitStringInMultipleLines = splitStringInMultipleLines;

package/package.json

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

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

@@ -4,9 +4,15 @@ 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;
+const TOP_PADDING = 30;
+const BOTTOM_PADDING = 30;
+
+// Calculate usable height per page
+const USABLE_HEIGHT = PAGE_HEIGHT - HEADER_HEIGHT - FOOTER_HEIGHT - TOP_PADDING - BOTTOM_PADDING;
+const SPLIT_THRESHOLD = USABLE_HEIGHT * 0.80;
 
 const Row = ({ widgets, i, onChangeHeight = () => { } }) => {
   const ref = useRef();
@@ -28,7 +34,7 @@ const Row = ({ widgets, i, onChangeHeight = () => { } }) => {
     if (height) {
       onChangeHeight(i, { height, ref });
     }
-  }, [height])
+  }, [height, i, onChangeHeight])
 
   return (
     <section ref={ref} style={widgets.style}>
@@ -52,52 +58,90 @@ export default function PdfView({
 
   const doSizing = useCallback(() => {
     const keys = Object.keys(sectionsConfig);
-    let _pages = [1];
-    let _page = 1;
-
-    if (keys.length === config.length) {
-      let incrHeight = 0;
+    
+    if (keys.length !== config.length) return;
 
-      keys.forEach(k => {
-        const { ref } = sectionsConfig[k];
-        ref.current.style.marginBottom = '0px';
-        // ref.current.style.marginTop = '15px';
-      })
+    // Check if all refs are ready
+    const allRefsReady = keys.every(k => {
+      const { ref } = sectionsConfig[k];
+      return ref && ref.current;
+    });
 
-      keys.forEach((k, i) => {
-        const { height, ref } = sectionsConfig[k];
+    if (!allRefsReady) return;
 
-        if (i === 0) {
-          ref.current.style.marginTop = `${HEADER_HEIGHT}px`;
-          incrHeight += HEADER_HEIGHT;
-        }
+    let _pages = [1];
+    let currentPage = 1;
+    let remainingHeight = USABLE_HEIGHT;
+
+    // Reset all margins first
+    keys.forEach(k => {
+      const { ref } = sectionsConfig[k];
+      if (ref.current) {
+        ref.current.style.marginTop = '0px';
+        ref.current.style.marginBottom = '0px';
+        ref.current.style.paddingBottom = '0px';
+      }
+    });
 
-        const newHeight = incrHeight + height;
+    keys.forEach((k, i) => {
+      const { height, ref } = sectionsConfig[k];
+      if (!ref || !ref.current) return;
+      
+      const isFirst = i === 0;
+      const isLast = i === keys.length - 1;
+      const startOfPageMargin = HEADER_HEIGHT + TOP_PADDING;
+
+      // First section of first page gets header spacing
+      if (isFirst) {
+        ref.current.style.marginTop = `${startOfPageMargin}px`;
+        remainingHeight = USABLE_HEIGHT;
+      }
 
-        if (i === keys.length - 1) {
-          ref.current.style.paddingBottom = '30px';
+      // Calculate space needed for this section (including spacing if not first on page)
+      const sectionTotalHeight = height + (isFirst || remainingHeight === USABLE_HEIGHT ? 0 : SECTION_SPACING);
+      
+      // Check if adding this section would exceed the remaining height
+      const wouldExceedPage = sectionTotalHeight > remainingHeight;
+      
+      // Check if the accumulated height on current page + this section exceeds 65% threshold
+      const currentPageUsed = USABLE_HEIGHT - remainingHeight;
+      const totalWithThisSection = currentPageUsed + sectionTotalHeight;
+      const wouldExceedThreshold = totalWithThisSection > SPLIT_THRESHOLD;
+
+      if (!isFirst && (wouldExceedPage || wouldExceedThreshold)) {
+        // Move to next page
+        const previousKey = keys[i - 1];
+        if (sectionsConfig[previousKey]) {
+          const { ref: prevRef } = sectionsConfig[previousKey];
+          if (prevRef && prevRef.current) {
+            // Add margin to push to next page
+            prevRef.current.style.marginBottom = `${(remainingHeight * 0.4) + HEADER_HEIGHT}px`;
+          }
         }
 
-        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);
-          }
+        // Start new page - position after header and top padding
+        currentPage += 1;
+        _pages.push(currentPage);
+        ref.current.style.marginTop = `${startOfPageMargin}px`;
+        remainingHeight = USABLE_HEIGHT - height;
+      } else {
+        // Section fits on current page
+        if (!isFirst && remainingHeight !== USABLE_HEIGHT) {
+          ref.current.style.marginTop = `${SECTION_SPACING}px`;
+          remainingHeight -= (height + SECTION_SPACING);
         } else {
-          incrHeight = newHeight + 24;
+          remainingHeight -= height;
         }
-        // console.groupEnd();
-      })
-      setPages(_pages);
-    }
-  }, [sectionsConfig]);
+      }
+
+      // Add padding to last section
+      if (isLast) {
+        ref.current.style.paddingBottom = `${BOTTOM_PADDING}px`;
+      }
+    });
+
+    setPages(_pages);
+  }, [sectionsConfig, config.length]);
 
   useEffect(() => {
     doSizing();
@@ -117,7 +161,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}
               />
@@ -128,23 +172,20 @@ 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 - 24, position: 'absolute', left: 0, zIndex: 1000000 }}
-            key={`headers-${page}`}
+            style={{ 
+              top: ((page - 1) * PAGE_HEIGHT), 
+              width: '100%', 
+              height: HEADER_HEIGHT - 24, 
+              position: 'absolute', 
+              left: 0, 
+              zIndex: 1000000 
+            }}
             className="flex-row dashboard-header"
           >
             <div className="flex flex-column justify-center flex-1">
@@ -155,8 +196,14 @@ 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 }}
-            key={`footers-${page}`}
+            style={{ 
+              top: (page * PAGE_HEIGHT) - FOOTER_HEIGHT, 
+              width: '100%', 
+              height: FOOTER_HEIGHT, 
+              position: 'absolute', 
+              left: 0, 
+              zIndex: 1000000 
+            }}
             className="dashboard-footer flex-row"
           >
             <div className="flex flex-column justify-center">
@@ -190,7 +237,7 @@ export default function PdfView({
               <h5>{page}</h5>
             </div>
           </div>
-        </>
+        </div>
       ))}
     </div>
   );
@@ -204,4 +251,5 @@ 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,41 +41,12 @@ 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={(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;
-                                        }
-                                    }
-                                }}
+                                onClick={buttonConfig?.disabled ? (e) => e.preventDefault() : undefined}
                             >
-                                <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>
                     </>
@@ -83,21 +54,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",
@@ -108,16 +79,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>

package/src/helpers/StringHelper.js

@@ -192,4 +192,14 @@ export const splitStringInMultipleLines = (s, limit = 20) => {
     if (line) result += line;
     
     return result;
-}
+}
+
+export  const safeJsonParse = (value, fallback = value) => {
+  if (typeof value !== 'string') return value;
+  try {
+    return JSON.parse(value);
+  } catch {
+    console.warn('Failed to parse JSON:', value);
+    return fallback;
+  }
+};

package/src/utils.js

@@ -9,7 +9,7 @@ export { renderTooltip, renderTooltipJsx } from './@daf/utils/tooltip'
 export { getRangeOfTicks } from './helpers/chart'
 
 export { propHasValue } from './helpers/deepFind'
-export { isEmptyOrSpaces, capitalizeAll, capitalize, camelCaseToTitle, snakeCaseToTitleCase, titleToCamelCase, findOptions, getOptionAsObject, nowToIso, renderTemplateString, renderTemplateStringInObject, truncateString, splitStringInMultipleLines } from './helpers/StringHelper'
+export { isEmptyOrSpaces, capitalizeAll, capitalize, camelCaseToTitle, snakeCaseToTitleCase, titleToCamelCase, findOptions, getOptionAsObject, nowToIso, renderTemplateString, renderTemplateStringInObject, truncateString, splitStringInMultipleLines, safeJsonParse } from './helpers/StringHelper'
 export { getNkey, groupSubsections, getImageUploadViewValue } from './@daf/core/components/ViewForm/helper'
 export { renderRows } from './@daf/core/components/Table/helper'
 export { filterOptions, filterString, hasNotChanged, filterSelectOptions, mapSubGroupsInSubmit, mapSubGroupsInGet, filterCreateData, changeInputMeta, renderDateFormatted } from './helpers/Forms'

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

@@ -1,330 +0,0 @@
-/* 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;
-}