datastake-daf 0.6.195 → 0.6.196

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.195",
+	"version": "0.6.196",
 	"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/ProjectWidget/index.jsx

@@ -7,87 +7,85 @@ const { Meta } = Card;
 const { useToken } = theme;
 
 export default function ProjectWidget({
-	title,
-	description,
-	onLinkClick,
-	image,
-	linkIcon = "Link",
-	sdgList = [],
-	items = [],
-	onCardClick,
-	hideSDGList = false,
-	t = (x) => x,
-	...props
+  title,
+  description,
+  onLinkClick,
+  image,
+  linkIcon = "Link",
+  sdgList,
+  items,
+  onCardClick,
+  hideSDGList = false,
+  t = (x) => x,
+  ...props
 }) {
-	const [isHovered, setIsHovered] = React.useState(false);
-	const { token } = useToken();
+  const [isHovered, setIsHovered] = React.useState(false);
+  const { token } = useToken();
 
-	return (
-		<Card
-			style={{
-				// flex: 1,
-				width: 318,
-				minWidth: 318,
-				// minWidth: "200px",
-			}}
-			hoverable
-			onMouseEnter={() => setIsHovered(true)}
-			onMouseLeave={() => setIsHovered(false)}
-			onClick={onCardClick}
-			cover={
-				<ImageContainer>
-					{image ? (
-						<div
-							className="image"
-							style={{
-								backgroundImage: `url(${image})`,
-							}}
-						/>
-					) : (
-						<div
-							style={{
-								height: "103px",
-								borderBottom: "1px solid var(--base-gray-30)",
-							}}
-						>
-							<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
-						</div>
-					)}
+  return (
+    <Card
+      style={{
+        flex: 1,
+        width: "100%",
+        minWidth: "200px",
+      }}
+      hoverable
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      onClick={onCardClick}
+      cover={
+        <ImageContainer>
+          {image ? (
+            <div
+              className="image"
+              style={{
+                backgroundImage: `url(${image})`,
+              }}
+            />
+          ) : (
+            <div
+              style={{
+                height: "103px",
+              }}
+            >
+              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+            </div>
+          )}
 
-					{onLinkClick && (
-						<div className="icon-container" onClick={onLinkClick}>
-							<CustomIcon
-								name={linkIcon}
-								width={16}
-								height={16}
-								color={isHovered ? token.colorPrimary7 : "black"}
-							/>
-						</div>
-					)}
-				</ImageContainer>
-			}
-			{...props}
-		>
-			<Meta title={title || undefined} description={description || undefined} />
-			<ProjectWidgetItems>
-				{items.map((item, index) => (
-					<li key={index} className="project-widget-item">
-						<Label>{item.label}</Label>
-						{item.render()}
-					</li>
-				))}
-			</ProjectWidgetItems>
+          {onLinkClick && (
+            <div className="icon-container" onClick={onLinkClick}>
+              <CustomIcon
+                name={linkIcon}
+                width={16}
+                height={16}
+                color={isHovered ? token.colorPrimary7 : "black"}
+              />
+            </div>
+          )}
+        </ImageContainer>
+      }
+      {...props}
+    >
+      <Meta title={title || undefined} description={description || undefined} />
+      <ProjectWidgetItems>
+        {items.map((item, index) => (
+          <li key={index} className="project-widget-item">
+            <Label>{item.label}</Label>
+            {item.render()}
+          </li>
+        ))}
+      </ProjectWidgetItems>
 
-			{!hideSDGList && (
-				<div
-					style={{
-						borderTop: "1px solid var(--base-gray-30)",
-						paddingTop: "10px",
-					}}
-				>
-					<SdgList sdgList={sdgList} t={t} />
-				</div>
-			)}
-		</Card>
-	);
+      {!hideSDGList && (
+        <div
+          style={{
+            borderTop: "1px solid var(--base-gray-30)",
+            paddingTop: "10px",
+          }}
+        >
+          <SdgList sdgList={sdgList} t={t} />
+        </div>
+      )}
+    </Card>
+  );
 }

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/Dashboard/Widget/WidgetPlaceholder/WidgetPlaceholder.stories.js

@@ -22,7 +22,6 @@ export const Primary = {
 		title: "Select a focus operator to visualise its supply chain",
 		height: 500,
 		icon: "KYC",
-		circleColor: "#014A4B",
 		description:
 			"This is based on information compiled by your organisation and approved sources.",
 	},

package/src/@daf/core/components/Dashboard/Widget/WidgetPlaceholder/_style.scss

@@ -30,7 +30,7 @@
     }
 
     .icon-bubble-d {
-      // background-color: #2b2c2d;
+      background-color: #2b2c2d;
       border-radius: 100%;
       width: 57px;
       height: 57px;

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

@@ -7,8 +7,6 @@ export default function WidgetPlaceholder({
 	style = {},
 	iconWidth = 22,
 	iconHeight = 22,
-	iconColor = "white",
-	circleColor = "#2b2c2d",
 	inDevelopment = false,
 	description = "",
 }) {
@@ -38,16 +36,13 @@ export default function WidgetPlaceholder({
 									</div>
 								</div>
 							) : (
-								<div
-									className="icon-bubble-d"
-									style={{ backgroundColor: circleColor }}
-								>
+								<div className="icon-bubble-d">
 									<div className="flex justify-content-center">
 										<CustomIcon
 											name={icon}
 											width={iconWidth}
 											height={iconHeight}
-											color={iconColor}
+											color="white"
 										/>
 									</div>
 								</div>