datastake-daf 0.6.200 → 0.6.201

package/dist/components/index.js

@@ -12469,7 +12469,6 @@ function Tags({
     className: "flex ml-3",
     children: [mainTags.map((t, i) => /*#__PURE__*/jsxRuntime.jsx(antd.Tag, {
       style: {
-        width: '100px',
         textAlign: 'center'
       },
       color: t.color || 'default',
@@ -12483,7 +12482,6 @@ function Tags({
       }),
       children: /*#__PURE__*/jsxRuntime.jsxs(antd.Tag, {
         style: {
-          width: '100px',
           textAlign: 'center'
         },
         children: ["+", otherTags.length]
@@ -21028,9 +21026,27 @@ function ProjectWidget(_ref) {
 }
 
 const Style$x = dt.div`
-    .daf-widget {
+    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 {
         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 {
@@ -21043,6 +21059,11 @@ const Style$x = dt.div`
         align-items: center;
         border: 1px solid #E5E7EB;
     }
+
+    .disabled-anchor {
+        cursor: not-allowed;
+        opacity: 0.5;
+    }
 `;
 
 const {
@@ -21060,13 +21081,17 @@ const WidgetCard = _ref => {
     loading = false,
     iconColor,
     buttonIcon,
-    imageUrl
+    imageUrl,
+    buttonConfig = {},
+    width,
+    t = () => {}
   } = _ref;
   useToken$h();
   return /*#__PURE__*/jsxRuntime.jsx(Style$x, {
     backgroundColor: backgroundColor,
     backgroundBorderColor: backgroundBorderColor,
-    children: /*#__PURE__*/jsxRuntime.jsxs(Widget, {
+    width: width,
+    children: /*#__PURE__*/jsxRuntime.jsx(Widget, {
       title: /*#__PURE__*/jsxRuntime.jsxs("div", {
         style: {
           display: "flex",
@@ -21090,39 +21115,80 @@ const WidgetCard = _ref => {
       addedHeader: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {
           className: "flex-1"
-        }), /*#__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
+        }), /*#__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
+            })
           })
         })]
       }),
       loading: loading,
-      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", {
+      className: "with-tabs no-pt-body",
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
         style: {
           display: "flex",
-          justifyContent: "space-between"
+          flexDirection: "column",
+          height: "100%",
+          minHeight: "150px"
         },
-        children: [item.isTag ? /*#__PURE__*/jsxRuntime.jsx(antd.Tag, {
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
           style: {
-            width: '90px',
-            textAlign: 'center',
-            borderRadius: '10px'
+            flex: 1,
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "flex-start",
+            marginTop: "24px",
+            marginBottom: "24px",
+            minHeight: "0"
           },
-          color: item.tagColor || 'default',
-          children: item.label
-        }) : /*#__PURE__*/jsxRuntime.jsx("span", {
-          children: item.label
-        }), /*#__PURE__*/jsxRuntime.jsx("span", {
-          children: item.value
+          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"
+          },
+          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))
         })]
-      }, item))]
+      })
     })
   });
 };
@@ -21139,15 +21205,11 @@ 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({
-      afterChange: onChange
-    }, rest), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsx(antd.Carousel, _objectSpread2(_objectSpread2({}, rest), {}, {
       children: children
     }))
   });

package/dist/utils/index.js

@@ -6180,6 +6180,7 @@ 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",
@@ -7372,6 +7373,7 @@ 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.",
@@ -9204,6 +9206,7 @@ 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.200",
+	"version": "0.6.201",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

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

@@ -53,16 +53,13 @@ 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 afterChange={onChange} {...rest}>
+      <Carousel {...rest}>
         {children}
       </Carousel>
     </Widget>

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

@@ -1,6 +1,7 @@
 import ThemeLayout from "../../../ThemeLayout";
 import WidgetCard from "./index";
-
+import WidgetCardContainer from "./WidgetCardContainer";
+import Widget from "../index";
 export default {
 	title: "Dashboard/Widgets/WidgetCard",
 	tags: ["autodocs"],
@@ -14,26 +15,149 @@ 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: {
-        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"
+        ...firstCard,
+        width: "300px"
 	},
 };
+
+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/WidgetCardContainer.jsx

@@ -0,0 +1,79 @@
+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;

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

@@ -3,6 +3,7 @@ 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;
 
@@ -18,39 +19,78 @@ const WidgetCard = ({
     iconColor, 
     buttonIcon,
     imageUrl,
+    buttonConfig = {},
+    width,
+    t = () => {},
 }) => {
     const { token } = useToken();
     return (
-        <Style backgroundColor={backgroundColor} backgroundBorderColor={backgroundBorderColor}>
+        <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 className="widget-card-logo-icon mr-2">
-                            <CustomIcon name={logoIcon} width={25} height={25} />
-                        </div> 
-                    }
-                    <Tooltip title={title}>{title}</Tooltip>
+                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>
+                    )}
                 </div>
-            }
-            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>
+            </Widget>
         </Style>
     )
 }

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

@@ -1,9 +1,27 @@
 import styled from 'styled-components';
 
 const Style = styled.div`
-    .daf-widget {
+    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 {
         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 {
@@ -16,6 +34,11 @@ 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/Header/components/Tags.jsx

@@ -8,7 +8,7 @@ export default function Tags({ tags = [] }) {
   return (
     <div className='flex ml-3'>
       {mainTags.map((t, i) => (
-        <Tag style={{ width: '100px', textAlign: 'center' }} color={t.color || 'default'} key={`tag-${i}`}>{t.label}</Tag>
+        <Tag style={{ textAlign: 'center' }} color={t.color || 'default'} key={`tag-${i}`}>{t.label}</Tag>
       ))}
 
       {!!otherTags.length && (
@@ -26,7 +26,7 @@ export default function Tags({ tags = [] }) {
               ))}
             </div>
           )}>
-          <Tag style={{ width: '100px', textAlign: 'center' }}>+{otherTags.length}</Tag>
+          <Tag style={{ textAlign: 'center' }}>+{otherTags.length}</Tag>
         </Tooltip>
       )}
     </div>

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

@@ -1,4 +1,5 @@
 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,4 +1,5 @@
 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,4 +1,5 @@
 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.",