datastake-daf 0.6.196 → 0.6.198

package/dist/components/index.js

@@ -18752,17 +18752,6 @@ const Style$A = dt.div`
   position: relative;
   width: 100%;
   height: 472px;
-  min-height: 300px;
-  
-  @media (max-width: 768px) {
-    height: 350px;
-    min-height: 250px;
-  }
-  
-  @media (max-width: 480px) {
-    height: 300px;
-    min-height: 200px;
-  }
 
   .filter-cont {
     position: absolute; 
@@ -20050,6 +20039,22 @@ const useGlobe = ({
   };
 };
 
+typeof localStorage.getItem('is_collapsed') === 'string' ? localStorage.getItem('is_collapsed') === 'true' ? true : false : true;
+typeof localStorage.getItem('is_nested_sidebar_collapsed') === 'string' ? localStorage.getItem('is_nested_sidebar_collapsed') === 'true' : true;
+const ResizeContext = /*#__PURE__*/React.createContext({
+  resizeLoading: false,
+  windowWidth: 0,
+  resizeDif: 0,
+  isCollapsed: false,
+  setIsCollapsed: () => {},
+  isNestedSidebarCollapsed: false,
+  setIsNestedSidebarCollapsed: () => {}
+});
+const useResizeContext = () => {
+  const values = React.useContext(ResizeContext);
+  return values;
+};
+
 function Globe(_ref) {
   var _activeMarker$data, _activeMarker$data2;
   let {
@@ -20090,6 +20095,11 @@ function Globe(_ref) {
     });
   }), [data]);
 
+  // Get resize context for sidebar state changes
+  const {
+    isCollapsed
+  } = useResizeContext();
+
   // Use custom hook to configure globe functionality
   const {
     container,
@@ -20133,6 +20143,33 @@ function Globe(_ref) {
       return () => clearTimeout(timer);
     }
   }, [forceResize]);
+
+  // Force resize when sidebar state changes (handles width changes)
+  React.useEffect(() => {
+    if (forceResize) {
+      // Trigger resize when sidebar collapses/expands
+      const timer = setTimeout(() => {
+        forceResize();
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [isCollapsed, forceResize]);
+
+  // Force resize when window width changes (handles sidebar width changes)
+  React.useEffect(() => {
+    if (forceResize) {
+      const handleResize = () => {
+        // Small delay to ensure DOM has updated
+        setTimeout(() => {
+          forceResize();
+        }, 100);
+      };
+      window.addEventListener('resize', handleResize);
+      return () => {
+        window.removeEventListener('resize', handleResize);
+      };
+    }
+  }, [forceResize]);
   return /*#__PURE__*/jsxRuntime.jsx(ComponentWithFocus, {
     children: /*#__PURE__*/jsxRuntime.jsxs(Style$A, {
       className: formatClassname([showSider && activeMarker && "with-sider"]),
@@ -20991,27 +21028,9 @@ function ProjectWidget(_ref) {
 }
 
 const Style$x = dt.div`
-    height: 100%; /* Make the wrapper take full height */
-    display: flex; /* Make this a flex container */
-    ${props => props.width ? `width: ${props.width};` : 'flex: 1;'} /* Use width if specified, otherwise flex */
-    
-    > .daf-widget {
+    .daf-widget {
         background-color: ${props => props.backgroundColor} !important;
         border-color: ${props => props.backgroundBorderColor} !important;
-        transition: box-shadow 0.2s ease-in-out;
-        height: 100%; /* Ensure full height */
-        width: 100%; /* Take full width of the container */
-        
-        &:hover {
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-        }
-
-        .widget-body {
-            display: flex;
-            flex-direction: column;
-            flex: 1; /* Make widget body flexible */
-            min-height: 0; /* Allow flex shrinking */
-        }
     }
 
     .widget-card-logo-icon {
@@ -21024,11 +21043,6 @@ const Style$x = dt.div`
         align-items: center;
         border: 1px solid #E5E7EB;
     }
-
-    .disabled-anchor {
-        cursor: not-allowed;
-        opacity: 0.5;
-    }
 `;
 
 const {
@@ -21046,17 +21060,13 @@ const WidgetCard = _ref => {
     loading = false,
     iconColor,
     buttonIcon,
-    imageUrl,
-    buttonConfig = {},
-    width,
-    t = () => {}
+    imageUrl
   } = _ref;
   useToken$h();
   return /*#__PURE__*/jsxRuntime.jsx(Style$x, {
     backgroundColor: backgroundColor,
     backgroundBorderColor: backgroundBorderColor,
-    width: width,
-    children: /*#__PURE__*/jsxRuntime.jsx(Widget, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(Widget, {
       title: /*#__PURE__*/jsxRuntime.jsxs("div", {
         style: {
           display: "flex",
@@ -21080,80 +21090,39 @@ const WidgetCard = _ref => {
       addedHeader: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {
           className: "flex-1"
-        }), /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-          title: buttonConfig !== null && buttonConfig !== void 0 && buttonConfig.disabled ? (buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.tooltipText) || t("Currently unavailable") : "",
-          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,
-            children: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
-              name: buttonIcon,
-              size: 16,
-              color: buttonConfig !== null && buttonConfig !== void 0 && buttonConfig.disabled ? "#6C737F" : iconColor || antd.theme.colorPrimary
-            })
+        }), /*#__PURE__*/jsxRuntime.jsx("a", {
+          className: "widget-card-logo-icon",
+          href: link,
+          children: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+            name: buttonIcon,
+            size: 16,
+            color: iconColor || antd.theme.colorPrimary
           })
         })]
       }),
       loading: loading,
-      className: "with-tabs no-pt-body",
-      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "with-tabs",
+      children: [description && /*#__PURE__*/jsxRuntime.jsx("p", {
+        children: description
+      }), data === null || data === void 0 ? void 0 : data.map(item => /*#__PURE__*/jsxRuntime.jsxs("div", {
         style: {
           display: "flex",
-          flexDirection: "column",
-          height: "100%",
-          minHeight: "150px"
+          justifyContent: "space-between"
         },
-        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        children: [item.isTag ? /*#__PURE__*/jsxRuntime.jsx(antd.Tag, {
           style: {
-            flex: 1,
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "flex-start",
-            marginTop: "24px",
-            marginBottom: "24px",
-            minHeight: "0"
-          },
-          children: description ? /*#__PURE__*/jsxRuntime.jsx("p", {
-            style: {
-              margin: 0,
-              flex: 1,
-              display: "flex",
-              alignItems: "flex-start",
-              minHeight: "0"
-            },
-            children: description
-          }) : /*#__PURE__*/jsxRuntime.jsx("div", {
-            style: {
-              flex: 1
-            }
-          })
-        }), data && data.length > 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
-          style: {
-            display: "flex",
-            flexDirection: "column",
-            gap: "8px"
+            width: '90px',
+            textAlign: 'center',
+            borderRadius: '10px'
           },
-          children: data.map(item => /*#__PURE__*/jsxRuntime.jsxs("div", {
-            style: {
-              display: "flex",
-              justifyContent: "space-between"
-            },
-            children: [item.isTag ? /*#__PURE__*/jsxRuntime.jsx(antd.Tag, {
-              style: {
-                width: '90px',
-                textAlign: 'center',
-                borderRadius: '10px'
-              },
-              color: item.tagColor || 'default',
-              children: item.label
-            }) : /*#__PURE__*/jsxRuntime.jsx("span", {
-              children: item.label
-            }), /*#__PURE__*/jsxRuntime.jsx("span", {
-              children: item.value
-            })]
-          }, item))
+          color: item.tagColor || 'default',
+          children: item.label
+        }) : /*#__PURE__*/jsxRuntime.jsx("span", {
+          children: item.label
+        }), /*#__PURE__*/jsxRuntime.jsx("span", {
+          children: item.value
         })]
-      })
+      }, item))]
     })
   });
 };
@@ -21170,11 +21139,15 @@ function CarouselWidget(_ref) {
    * @param {number} currentSlide - The index of the current slide after change
    * @private
    */
-
+  const onChange = currentSlide => {
+    console.log(currentSlide);
+  };
   return /*#__PURE__*/jsxRuntime.jsx(Widget, {
     title: title,
     className: "with-border-header h-w-btn-header",
-    children: /*#__PURE__*/jsxRuntime.jsx(antd.Carousel, _objectSpread2(_objectSpread2({}, rest), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsx(antd.Carousel, _objectSpread2(_objectSpread2({
+      afterChange: onChange
+    }, rest), {}, {
       children: children
     }))
   });
@@ -37202,6 +37175,13 @@ const inputTypeComponent$1 = {
       },
       children: (opts || []).map((option, i) => {
         const otherProps = {};
+
+        // Handle disabled property from option
+        if (option.disabled !== undefined) {
+          otherProps.disabled = option.disabled;
+        }
+
+        // Handle other dynamic properties from option.options
         if (option.options) {
           Object.keys(option.options).forEach(prop => {
             if (eval(option.options[prop])) {
@@ -37213,10 +37193,17 @@ const inputTypeComponent$1 = {
         }
         return option.items ? /*#__PURE__*/jsxRuntime.jsx(antd.Select.OptGroup, {
           label: option.label,
-          children: option.items.map((og, j) => /*#__PURE__*/jsxRuntime.jsx(antd.Select.Option, {
-            value: og.value,
-            children: og.label
-          }, `${i}${j}`))
+          children: option.items.map((og, j) => {
+            const groupOtherProps = {};
+            if (og.disabled !== undefined) {
+              groupOtherProps.disabled = og.disabled;
+            }
+            return /*#__PURE__*/jsxRuntime.jsx(antd.Select.Option, {
+              value: og.value,
+              ...groupOtherProps,
+              children: og.label
+            }, `${i}${j}`);
+          })
         }) : /*#__PURE__*/jsxRuntime.jsx(antd.Select.Option, {
           value: option.value,
           ...otherProps,
@@ -37323,6 +37310,13 @@ const inputTypeComponent$1 = {
       placeholder: getMetaPlaceholer(inputMeta, t) || getInputProp(props.placeholder, formsValue) || t('Select all relevant options'),
       children: (opts || []).map((option, i) => {
         const otherProps = {};
+
+        // Handle disabled property from option
+        if (option.disabled !== undefined) {
+          otherProps.disabled = option.disabled;
+        }
+
+        // Handle other dynamic properties from option.options
         if (option.options) {
           Object.keys(option.options).forEach(prop => {
             if (eval(option.options[prop])) {
@@ -37332,15 +37326,24 @@ const inputTypeComponent$1 = {
             }
           });
         }
+
+        // If option is disabled and currently selected, remove it from selection
         if (otherProps.disabled && (value || []).includes(option.value)) {
           updateFormValues$1(repeatIndex, repeatValues, inputName, (value || []).filter(v => v !== option.value), formsValue, name, form);
         }
         return option.items ? /*#__PURE__*/jsxRuntime.jsx(antd.Select.OptGroup, {
           label: option.label,
-          children: option.items.map((og, j) => /*#__PURE__*/jsxRuntime.jsx(antd.Select.Option, {
-            value: og.value,
-            children: og.label
-          }, `${i}${j}`))
+          children: option.items.map((og, j) => {
+            const groupOtherProps = {};
+            if (og.disabled !== undefined) {
+              groupOtherProps.disabled = og.disabled;
+            }
+            return /*#__PURE__*/jsxRuntime.jsx(antd.Select.Option, {
+              value: og.value,
+              ...groupOtherProps,
+              children: og.label
+            }, `${i}${j}`);
+          })
         }) : /*#__PURE__*/jsxRuntime.jsx(antd.Select.Option, {
           value: option.value,
           ...otherProps,
@@ -51595,22 +51598,6 @@ function useConfig(data) {
   return config;
 }
 
-typeof localStorage.getItem('is_collapsed') === 'string' ? localStorage.getItem('is_collapsed') === 'true' ? true : false : true;
-typeof localStorage.getItem('is_nested_sidebar_collapsed') === 'string' ? localStorage.getItem('is_nested_sidebar_collapsed') === 'true' : true;
-const ResizeContext = /*#__PURE__*/React.createContext({
-  resizeLoading: false,
-  windowWidth: 0,
-  resizeDif: 0,
-  isCollapsed: false,
-  setIsCollapsed: () => {},
-  isNestedSidebarCollapsed: false,
-  setIsNestedSidebarCollapsed: () => {}
-});
-const useResizeContext = () => {
-  const values = React.useContext(ResizeContext);
-  return values;
-};
-
 const DAYS = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
 function UserActivity({
   loading,

package/dist/utils/index.js

@@ -6180,7 +6180,6 @@ const userHasInterface = (user, app, intf) => {
 };
 
 const en = {
-  "Currently unavailable": "Currently unavailable",
   Description: "Description",
   "missing-inputs": "Missing Inputs",
   "all-inputs-fullfilled": "All inputs in this section are fullfilled",
@@ -7373,7 +7372,6 @@ const en = {
 };
 
 const fr = {
-  "Currently unavailable": "Actuellement indisponible",
   "Description": "Description",
   "missing-inputs": "Données Manquantes",
   "all-inputs-fullfilled": "Toutes les données de cette section ont été saisies.",
@@ -9206,7 +9204,6 @@ const fr = {
 };
 
 const sp = {
-  "Currently unavailable": "Actualmente no disponible",
   "Description": "Descripción",
   "missing-inputs": "Datos que Faltan",
   "all-inputs-fullfilled": "Todas las entradas de esta sección están completas.",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.196",
+	"version": "0.6.198",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",
@@ -15,7 +15,7 @@
 		"buffer": "^6.0.3",
 		"countries-list": "^2.6.1",
 		"country-city-location": "^1.0.13",
-		"datastake-daf": "^0.5.780",
+		"datastake-daf": "0.6.184",
 		"dayjs": "^1.11.12",
 		"deepmerge": "^4.3.1",
 		"dot-object": "^2.1.5",

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

@@ -8,6 +8,7 @@ import CustomIcon from "../../Icon/CustomIcon.jsx";
 import ComponentWithFocus from "../ComponentWithFocus/index.jsx";
 import { formatClassname } from "../../../../../helpers/ClassesHelper";
 import Filters from "../../Filters/FloatingFilters/index.js";
+import { useResizeContext } from "../../../context/Resize/index.js";
 
 /**
  * Globe Component
@@ -129,6 +130,9 @@ function Globe({
 		[data],
 	);
 
+	// Get resize context for sidebar state changes
+	const { isCollapsed } = useResizeContext();
+
 	// Use custom hook to configure globe functionality
 	const { container, activeMarker, mapOptionsButtonsConfig, forceResize } = useGlobe({
 		data: mappedData,
@@ -171,6 +175,37 @@ function Globe({
 		}
 	}, [forceResize]);
 
+	// Force resize when sidebar state changes (handles width changes)
+	useEffect(() => {
+		if (forceResize) {
+			// Trigger resize when sidebar collapses/expands
+			const timer = setTimeout(() => {
+				forceResize();
+			}, 100);
+
+			return () => clearTimeout(timer);
+		}
+	}, [isCollapsed, forceResize]);
+
+	// Force resize when window width changes (handles sidebar width changes)
+	useEffect(() => {
+		if (forceResize) {
+			const handleResize = () => {
+				// Small delay to ensure DOM has updated
+				setTimeout(() => {
+					forceResize();
+				}, 100);
+			};
+
+			window.addEventListener('resize', handleResize);
+			
+			return () => {
+				window.removeEventListener('resize', handleResize);
+			};
+		}
+	}, [forceResize]);
+
+
 	return (
 		<ComponentWithFocus>
 			<Style className={formatClassname([showSider && activeMarker && "with-sider"])}>

package/src/@daf/core/components/Dashboard/Globe/style.js

@@ -6,17 +6,6 @@ const Style = styled.div`
   position: relative;
   width: 100%;
   height: 472px;
-  min-height: 300px;
-  
-  @media (max-width: 768px) {
-    height: 350px;
-    min-height: 250px;
-  }
-  
-  @media (max-width: 480px) {
-    height: 300px;
-    min-height: 200px;
-  }
 
   .filter-cont {
     position: absolute; 

package/src/@daf/core/components/Dashboard/Widget/CarouselWidget/index.jsx

@@ -53,13 +53,16 @@ function CarouselWidget({title, children, ...rest}) {
    * @param {number} currentSlide - The index of the current slide after change
    * @private
    */
+  const onChange = (currentSlide) => {
+    console.log(currentSlide);
+  };
 
   return (
     <Widget
       title={title}
       className="with-border-header h-w-btn-header"
     >
-      <Carousel {...rest}>
+      <Carousel afterChange={onChange} {...rest}>
         {children}
       </Carousel>
     </Widget>

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

@@ -1,7 +1,6 @@
 import ThemeLayout from "../../../ThemeLayout";
 import WidgetCard from "./index";
-import WidgetCardContainer from "./WidgetCardContainer";
-import Widget from "../index";
+
 export default {
 	title: "Dashboard/Widgets/WidgetCard",
 	tags: ["autodocs"],
@@ -15,149 +14,26 @@ export default {
 	],
 };
 
-const firstCard = {
-    loading: false,
-    "title": "Test",
-    "link": "/app/mines/summary/LOC-00000000271",
-    "logoIcon": "Kobo",
-    "description": "This is a description of the widget card. It can be long and scrollable.",
-    "buttonIcon": 'ArrowUpRight',
-    "iconColor": "#ff0000",
-    "imageUrl": "https://picsum.photos/200/300",
-    "data": [
-        {
-            "label": "Type",
-            "value": "Test",
-            "isTag": true,
-            tagColor: 'blue'
-        }
-    ],
-    "backgroundColor": "#F6FEF9",
-    "backgroundBorderColor": "#B0F3CB",
-    "buttonConfig": {
-        "disabled": true
-    },
-    t: (s) => s,
-}
-
-const secondCard = {
-    loading: false,
-    "title": "Test",
-    "link": "/app/mines/summary/LOC-00000000271",
-    "logoIcon": "Kobo",
-    "description": "This is a description of the widget card. It can be long and scrollable. This is a description of the widget card. It can be long and scrollable.",
-    "buttonIcon": 'ArrowUpRight',
-    "iconColor": "#ff0000",
-    "imageUrl": "https://picsum.photos/200/300",
-    "data": [
-        {
-            "label": "Type",
-            "value": "Test",
-            "isTag": true,
-            tagColor: 'blue'
-        }
-    ],
-    "backgroundColor": "#F6FEF9",
-    "backgroundBorderColor": "#B0F3CB",
-    "buttonConfig": {
-        "disabled": true
-    },
-    t: (s) => s,
-    width: "300px"
-}
-
 
 export const Primary = {
 	args: {
-        ...firstCard,
-        width: "300px"
+        loading: false,
+        "title": "Test",
+        "link": "/app/mines/summary/LOC-00000000271",
+        "logoIcon": "Kobo",
+        "description": "This is a description of the widget card. It can be long and scrollable.",
+        "buttonIcon": 'ArrowUpRight',
+        "iconColor": "#ff0000",
+        "imageUrl": "https://picsum.photos/200/300",
+        "data": [
+            {
+                "label": "Type",
+                "value": "Mine Summary",
+                "isTag": true,
+                tagColor: 'blue'
+            }
+        ],
+        "backgroundColor": "#F6FEF9",
+        "backgroundBorderColor": "#B0F3CB"
 	},
 };
-
-export const InsideWidget = {
-    render: (args) => (
-        <Widget title="Widget Card" description={"Connect to external data sources for unified access and management."} className="with-border-header h-w-btn-header">
-            <div className="flex flex-row gap-4" style={{alignItems: 'stretch', height: '100%'}}>
-                <WidgetCard {...firstCard} width="400px" />
-                <WidgetCard {...secondCard} width="400px" />
-            </div>
-        </Widget>
-    ),
-}
-
-export const UsingContainer = {
-    render: (args) => (
-        <Widget title="Widget Card Container" description={"Using the new WidgetCardContainer component"} className="with-border-header h-w-btn-header">
-            <WidgetCardContainer 
-                cards={[
-                    { 
-                        ...firstCard, 
-                        width: "400px",
-                        description: "Short description"
-                    },
-                    { 
-                        ...secondCard, 
-                        width: "350px",
-                        description: "This is a much longer description that takes up more space to demonstrate how the component handles different content lengths while maintaining perfect alignment of bottom elements."
-                    }
-                ]}
-                gap="16px"
-            />
-        </Widget>
-    ),
-}
-
-export const MultipleCards = {
-    render: (args) => (
-        <Widget title="Multiple Cards with Container" description={"Demonstrating multiple cards with different content lengths"} className="with-border-header h-w-btn-header">
-            <WidgetCardContainer 
-                cards={[
-                    { 
-                        ...firstCard, 
-                        width: "500px",
-                        description: "Short description"
-                    },
-                    { 
-                        ...secondCard, 
-                        width: "200px"
-                    },
-                    { 
-                        ...firstCard, 
-                        width: "350px",
-                        title: "Third Card",
-                        description: "This is an even longer description that should expand to fill the available space while maintaining alignment with other cards."
-                    }
-                ]}
-                gap="16px"
-            />
-        </Widget>
-    ),
-}
-
-export const FlexWidths = {
-    render: (args) => (
-        <Widget title="Flexible Widths" description={"Cards without width will flex to fill space"} className="with-border-header h-w-btn-header">
-            <WidgetCardContainer 
-                cards={[
-                    { 
-                        ...firstCard, 
-                        width: "200px",
-                        description: "Fixed width card"
-                    },
-                    { 
-                        ...secondCard,
-                        width: "250px",
-                        description: "This card will flex to fill remaining space"
-                    },
-                    { 
-                        ...firstCard, 
-                        width: "250px",
-                        title: "Fixed Width",
-                        description: "Another fixed width card"
-                    }
-                ]}
-                gap="16px"
-            />
-        </Widget>
-    ),
-}

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

@@ -3,7 +3,6 @@ import Widget from '../index.jsx'
 import { theme, Tooltip, Tag } from 'antd'
 import CustomIcon from '../../../Icon/CustomIcon.jsx'
 import Style from './style.js'
-import { formatClassname } from '../../../../../../helpers/ClassesHelper.js'
 
 const { useToken } = theme;
 
@@ -19,78 +18,39 @@ const WidgetCard = ({
     iconColor, 
     buttonIcon,
     imageUrl,
-    buttonConfig = {},
-    width,
-    t = () => {},
 }) => {
     const { token } = useToken();
     return (
-        <Style backgroundColor={backgroundColor} backgroundBorderColor={backgroundBorderColor} width={width}>
+        <Style backgroundColor={backgroundColor} backgroundBorderColor={backgroundBorderColor}>
             <Widget
-                title={
-                    <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> 
-                        }
-                        <Tooltip title={title}>{title}</Tooltip>
-                    </div>
-                }
-                addedHeader={
-                    <>
-                        <div className="flex-1" />
-                        <Tooltip title={buttonConfig?.disabled ? (buttonConfig?.tooltipText || t("Currently unavailable")) : ""}>
-                            <a 
-                                className={formatClassname(["widget-card-logo-icon", buttonConfig?.disabled && "disabled-anchor"])} 
-                                href={buttonConfig?.disabled ? undefined : link}
-                                onClick={buttonConfig?.disabled ? (e) => e.preventDefault() : undefined}
-                            >
-                                <CustomIcon  name={buttonIcon} size={16} color={buttonConfig?.disabled ? "#6C737F" : (iconColor || theme.colorPrimary)} />
-                            </a>
-                        </Tooltip>
-                    </>
-                }
-                loading={loading}
-                className="with-tabs no-pt-body"
-            >
-                <div style={{display: "flex", flexDirection: "column", height: "100%", minHeight: "150px"}}>
-                    <div style={{
-                        flex: 1, 
-                        display: "flex",
-                        flexDirection: "column",
-                        justifyContent: "flex-start",
-                        marginTop: "24px",
-                        marginBottom: "24px",
-                        minHeight: "0" 
-                    }}>
-                        {description ? (
-                            <p style={{
-                                margin: 0, 
-                                flex: 1,
-                                display: "flex",
-                                alignItems: "flex-start",
-                                minHeight: "0"
-                            }}>
-                                {description}
-                            </p>
-                        ) : (
-                            <div style={{flex: 1}} />
-                        )}
-                    </div>
-                    
-                    {data && data.length > 0 && (
-                        <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>{item.value}</span>
-                                </div>
-                            ))}
-                        </div>
-                    )}
+            title={
+                <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> 
+                    }
+                    <Tooltip title={title}>{title}</Tooltip>
                 </div>
-            </Widget>
+            }
+            addedHeader={
+                <>
+                    <div className="flex-1" /><a className="widget-card-logo-icon" href={link}>
+                        <CustomIcon  name={buttonIcon} size={16} color={iconColor || theme.colorPrimary} />
+                    </a>
+                </>
+            }
+            loading={loading}
+            className="with-tabs"
+        >
+            {description && <p>{description}</p>}
+            {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>{item.value}</span>
+                </div>
+            ))}
+        </Widget>
         </Style>
     )
 }

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

@@ -1,27 +1,9 @@
 import styled from 'styled-components';
 
 const Style = styled.div`
-    height: 100%; /* Make the wrapper take full height */
-    display: flex; /* Make this a flex container */
-    ${props => props.width ? `width: ${props.width};` : 'flex: 1;'} /* Use width if specified, otherwise flex */
-    
-    > .daf-widget {
+    .daf-widget {
         background-color: ${props => props.backgroundColor} !important;
         border-color: ${props => props.backgroundBorderColor} !important;
-        transition: box-shadow 0.2s ease-in-out;
-        height: 100%; /* Ensure full height */
-        width: 100%; /* Take full width of the container */
-        
-        &:hover {
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-        }
-
-        .widget-body {
-            display: flex;
-            flex-direction: column;
-            flex: 1; /* Make widget body flexible */
-            min-height: 0; /* Allow flex shrinking */
-        }
     }
 
     .widget-card-logo-icon {
@@ -34,11 +16,6 @@ const Style = styled.div`
         align-items: center;
         border: 1px solid #E5E7EB;
     }
-
-    .disabled-anchor {
-        cursor: not-allowed;
-        opacity: 0.5;
-    }
 `;
 
 export default Style;

package/src/@daf/core/components/EditForm/EditInputs.stories.js

@@ -21,6 +21,7 @@ const Options = [
 	{
 		label: "Option 3",
 		value: "option3",
+		disabled: true,
 	},
 	{
 		label: "Option 4",

package/src/@daf/core/components/EditForm/helper.js

@@ -692,6 +692,13 @@ export const inputTypeComponent = {
     >
       {(opts || []).map((option, i) => {
         const otherProps = {};
+        
+        // Handle disabled property from option
+        if (option.disabled !== undefined) {
+          otherProps.disabled = option.disabled;
+        }
+        
+        // Handle other dynamic properties from option.options
         if (option.options) {
           Object.keys(option.options).forEach(prop => {
             if (eval(option.options[prop])) {
@@ -701,13 +708,20 @@ export const inputTypeComponent = {
             }
           });
         }
+        
         return option.items ?
           <Select.OptGroup label={option.label}>
-            {option.items.map((og, j) =>
-              <Select.Option value={og.value} key={`${i}${j}`}>
-                {og.label}
-              </Select.Option>
-            )}
+            {option.items.map((og, j) => {
+              const groupOtherProps = {};
+              if (og.disabled !== undefined) {
+                groupOtherProps.disabled = og.disabled;
+              }
+              return (
+                <Select.Option value={og.value} key={`${i}${j}`} {...groupOtherProps}>
+                  {og.label}
+                </Select.Option>
+              );
+            })}
           </Select.OptGroup> :
           <Select.Option value={option.value} key={option.value} {...otherProps}>
             {isEvaluation ? (
@@ -798,6 +812,13 @@ export const inputTypeComponent = {
     >
       {(opts || []).map((option, i) => {
         const otherProps = {};
+        
+        // Handle disabled property from option
+        if (option.disabled !== undefined) {
+          otherProps.disabled = option.disabled;
+        }
+        
+        // Handle other dynamic properties from option.options
         if (option.options) {
           Object.keys(option.options).forEach(prop => {
             if (eval(option.options[prop])) {
@@ -807,16 +828,25 @@ export const inputTypeComponent = {
             }
           });
         }
+        
+        // If option is disabled and currently selected, remove it from selection
         if (otherProps.disabled && (value || []).includes(option.value)) {
           updateFormValues(repeatIndex, repeatValues, inputName, (value || []).filter(v => v !== option.value), formsValue, name, form)
         }
+        
         return option.items ?
           <Select.OptGroup label={option.label}>
-            {option.items.map((og, j) =>
-              <Select.Option value={og.value} key={`${i}${j}`}>
-                {og.label}
-              </Select.Option>
-            )}
+            {option.items.map((og, j) => {
+              const groupOtherProps = {};
+              if (og.disabled !== undefined) {
+                groupOtherProps.disabled = og.disabled;
+              }
+              return (
+                <Select.Option value={og.value} key={`${i}${j}`} {...groupOtherProps}>
+                  {og.label}
+                </Select.Option>
+              );
+            })}
           </Select.OptGroup> :
           <Select.Option value={option.value} key={i} {...otherProps}>
             {option.label}

package/src/constants/locales/en/translation.js

@@ -1,5 +1,4 @@
 const en = {
-  "Currently unavailable": "Currently unavailable",
   Description: "Description",
   "missing-inputs": "Missing Inputs",
   "all-inputs-fullfilled": "All inputs in this section are fullfilled",

package/src/constants/locales/fr/translation.js

@@ -1,5 +1,4 @@
 const fr = {
-	"Currently unavailable": "Actuellement indisponible",
 	"Description": "Description",
 	"missing-inputs": "Données Manquantes",
 	"all-inputs-fullfilled": "Toutes les données de cette section ont été saisies.",

package/src/constants/locales/sp/translation.js

@@ -1,5 +1,4 @@
 const sp = {
-  "Currently unavailable": "Actualmente no disponible",
   "Description": "Descripción",
   "missing-inputs": "Datos que Faltan",
   "all-inputs-fullfilled": "Todas las entradas de esta sección están completas.",

package/src/@daf/core/components/Dashboard/Widget/WidgetCard/WidgetCardContainer.jsx

@@ -1,79 +0,0 @@
-import React from 'react';
-import WidgetCard from './index.js';
-
-/**
- * WidgetCardContainer Component - A container that renders multiple WidgetCards with consistent heights
- * 
- * @component
- * @example
- * // Basic usage
- * <WidgetCardContainer 
- *   cards={[
- *     { title: "Card 1", description: "Short description", width: "300px" },
- *     { title: "Card 2", description: "Much longer description text here", width: "400px" }
- *   ]}
- * />
- * 
- * @param {Object} props - Component props
- * @param {Array} props.cards - Array of widget card configurations
- * @param {string} [props.gap="16px"] - Gap between cards
- * @param {string} [props.className] - Additional CSS classes
- * @param {Object} [props.containerStyle] - Additional container styles
- * @param {string} [props.direction="row"] - Flex direction (row or column)
- * 
- * @features
- * - ✅ Equal heights for all cards regardless of content
- * - ✅ Individual width control per card
- * - ✅ Bottom content alignment across all cards
- * - ✅ Flexible description areas that expand
- * - ✅ Responsive layout support
- * 
- * @returns {JSX.Element} The rendered WidgetCardContainer component
- */
-const WidgetCardContainer = ({
-    cards = [],
-    gap = "16px",
-    className = "",
-    containerStyle = {},
-    direction = "row",
-    ...props
-}) => {
-    if (!cards || cards.length === 0) {
-        return null;
-    }
-
-    const containerStyles = {
-        display: "flex",
-        flexDirection: direction,
-        gap: gap,
-        alignItems: "stretch", // Ensure equal heights
-        height: "100%",
-        minHeight: "200px", // Ensure minimum height for proper stretching
-        ...containerStyle
-    };
-
-    return (
-        <div 
-            className={`widget-card-container ${className}`} 
-            style={containerStyles}
-            {...props}
-        >
-            {cards.map((cardConfig, index) => {
-                const {
-                    width,
-                    ...cardProps
-                } = cardConfig;
-
-                return (
-                    <WidgetCard
-                        key={cardConfig.key || cardConfig.title || index}
-                        width={width}
-                        {...cardProps}
-                    />
-                );
-            })}
-        </div>
-    );
-};
-
-export default WidgetCardContainer;