datastake-daf 0.6.768 → 0.6.769

package/package.json

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

package/src/@daf/core/components/Charts/ColumnChart/index.jsx

@@ -104,6 +104,8 @@ export default function ColumnChart({
 	width,
 	legendConfig = {},
 	isPdf = false,
+	yAxis: customYAxis,
+	xAxis: customXAxis,
 	...rest
 }) {
 	const containerRef = React.useRef(null);
@@ -146,6 +148,7 @@ export default function ColumnChart({
 				label: {
 					formatter: formattedXAxis,
 				},
+				...(customXAxis || {}),
 			},
 			yAxis: {
 				...(isPercentage
@@ -163,7 +166,12 @@ export default function ColumnChart({
 									(s) => `${s},`
 								) + " %"
 						: formattedYAxis,
+					...(customYAxis?.label || {}),
 				},
+				// Merge customYAxis properties (excluding label which is already merged above)
+				...(customYAxis ? Object.fromEntries(
+					Object.entries(customYAxis).filter(([key]) => key !== 'label')
+				) : {}),
 			},
 			legend: false,
 			...(showBackground && isPercentage && {
@@ -196,6 +204,8 @@ export default function ColumnChart({
 		color,
 		token.colorPrimary9,
 		groupField,
+		customYAxis,
+		customXAxis,
 	]);
 
 	React.useEffect(() => {

package/src/@daf/core/components/Charts/LineChart/index.jsx

@@ -88,6 +88,8 @@ export default function LineChart({
 	isPdf = false,
 	legendConfig = {},
 	width,
+	yAxis: customYAxis,
+	xAxis: customXAxis,
 	...rest
 }) {
 	const containerRef = React.useRef(null);
@@ -129,7 +131,12 @@ export default function LineChart({
 					style: {
 						fontSize: !autoHideXLabel ? 10 : undefined,
 					},
+					...(customXAxis?.label || {}),
 				},
+				// Merge customXAxis properties (excluding label which is already merged above)
+				...(customXAxis ? Object.fromEntries(
+					Object.entries(customXAxis).filter(([key]) => key !== 'label')
+				) : {}),
 			},
 			yAxis: {
 				...(isPercentage
@@ -143,7 +150,12 @@ export default function LineChart({
 					formatter: isPercentage
 						? (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`) + " %"
 						: formattedYAxis,
+					...(customYAxis?.label || {}),
 				},
+				// Merge customYAxis properties (excluding label which is already merged above)
+				...(customYAxis ? Object.fromEntries(
+					Object.entries(customYAxis).filter(([key]) => key !== 'label')
+				) : {}),
 			},
 			smooth: isSmooth,
 			meta: {
@@ -183,6 +195,8 @@ export default function LineChart({
 		tooltipConfig,
 		isPdf,
 		t,
+		customYAxis,
+		customXAxis,
 	]);
 
 	React.useEffect(() => {

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

@@ -48,6 +48,7 @@ export default function ActivityIndicatorsWidget({
 	}, [config, filterMode]);
 
 	const component = (
+		<section>
 		<Widget
 			loading={loading}
 			className={formatClassname(["flex-1 with-border-header h-w-btn-header no-p-body", widgetClassName])}
@@ -81,6 +82,7 @@ export default function ActivityIndicatorsWidget({
 				))}
 			</Style>
 		</Widget>
+		</section>
 	);
 
 	if (noMinWidth) {

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

@@ -0,0 +1,226 @@
+import ThemeLayout from "../../../ThemeLayout";
+import StatCard from "./index";
+import Widget from "../index.jsx";
+import DashboardLayout from "../../DashboardLayout/index.jsx";
+
+export default {
+	title: "Dashboard/Widgets/StatCard",
+	component: StatCard,
+	tags: ["autodocs"],
+	decorators: [
+		(Story) => (
+			<ThemeLayout>
+				<Story />
+			</ThemeLayout>
+		),
+	],
+};
+
+export const Primary = {
+	name: "StatCard - With All Props",
+	args: {
+		title: "Activity Participants",
+		value: "325",
+		icon: "Users",
+		change: {
+			value: 20,
+			direction: "up",
+		},
+	},
+};
+
+export const WithPositiveChange = {
+	name: "With Positive Change",
+	args: {
+		title: "Activity Participants",
+		value: "325",
+		icon: "Users",
+		change: {
+			value: 20,
+			direction: "up",
+		},
+	},
+};
+
+export const WithNegativeChange = {
+	name: "With Negative Change",
+	args: {
+		title: "Total Revenue",
+		value: "$12,450",
+		icon: "Package",
+		change: {
+			value: 15,
+			direction: "down",
+		},
+	},
+};
+
+export const WithoutChange = {
+	name: "Without Change Indicator",
+	args: {
+		title: "Total Projects",
+		value: "48",
+		icon: "Lock",
+	},
+};
+
+export const WithoutIcon = {
+	name: "Without Icon",
+	args: {
+		title: "Active Users",
+		value: "1,234",
+		change: {
+			value: 12,
+			direction: "up",
+		},
+	},
+};
+
+export const CustomChangeColors = {
+	name: "Custom Change Colors",
+	args: {
+		title: "Custom Metric",
+		value: "999",
+		icon: "Package",
+		change: {
+			value: 5,
+			direction: "up",
+			color: "#E0F2FE",
+			borderColor: "#7DD3FC",
+			textColor: "#0369A1",
+		},
+	},
+};
+
+export const MultipleCards = {
+	name: "Multiple Stat Cards",
+	render: () => (
+		<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))", gap: "16px" }}>
+			<StatCard
+				title="Activity Participants"
+				value="325"
+				icon="Users"
+				change={{
+					value: 20,
+					direction: "up",
+				}}
+			/>
+			<StatCard
+				title="Total Revenue"
+				value="$12,450"
+				icon="Package"
+				change={{
+					value: 15,
+					direction: "down",
+				}}
+			/>
+			<StatCard
+				title="Total Projects"
+				value="48"
+				icon="Lock"
+			/>
+			<StatCard
+				title="Active Users"
+				value="1,234"
+				icon="User"
+				change={{
+					value: 8,
+					direction: "up",
+				}}
+			/>
+		</div>
+	),
+};
+
+export const InWidget = {
+	name: "Inside Widget",
+	render: () => (
+		<Widget title="Key Statistics" className="with-border-header">
+			<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))", gap: "16px" }}>
+				<StatCard
+					title="Activity Participants"
+					value="325"
+					icon="Users"
+					change={{
+						value: 20,
+						direction: "up",
+					}}
+				/>
+				<StatCard
+					title="Total Revenue"
+					value="$12,450"
+					icon="Package"
+					change={{
+						value: 15,
+						direction: "down",
+					}}
+				/>
+				<StatCard
+					title="Total Projects"
+					value="48"
+					icon="Lock"
+				/>
+			</div>
+		</Widget>
+	),
+};
+
+export const InDashboard = {
+	name: "In Dashboard Layout",
+	render: () => (
+		<DashboardLayout>
+			<section>
+				<Widget>
+					<div
+						style={{
+							height: "500px",
+							backgroundColor: "#f0f0f0",
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "center",
+						}}
+					>
+						Placeholder
+					</div>
+				</Widget>
+				<Widget title="Statistics Overview" className="with-border-header">
+					<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))", gap: "16px" }}>
+						<StatCard
+							title="Activity Participants"
+							value="325"
+							icon="Users"
+							change={{
+								value: 20,
+								direction: "up",
+							}}
+						/>
+						<StatCard
+							title="Total Revenue"
+							value="$12,450"
+							icon="Package"
+							change={{
+								value: 15,
+								direction: "down",
+							}}
+						/>
+						<StatCard
+							title="Total Projects"
+							value="48"
+							icon="Lock"
+						/>
+						<StatCard
+							title="Active Users"
+							value="1,234"
+							icon="User"
+							change={{
+								value: 8,
+								direction: "up",
+							}}
+						/>
+					</div>
+				</Widget>
+			</section>
+		</DashboardLayout>
+	),
+};
+

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

@@ -0,0 +1,103 @@
+import React from 'react';
+import { Tooltip } from 'antd';
+import CustomIcon from '../../../Icon/CustomIcon.jsx';
+import Style from './style.js';
+
+const StatCard = ({
+    title,
+    value,
+    icon,
+    iconTooltip,
+    change = null, // Object with { value, direction?, color?, borderColor?, textColor? }
+}) => {
+    // Default colors for positive change (green)
+    const getChangeColors = () => {
+        if (!change) return {};
+        
+        const isPositive = change.direction !== 'down';
+        const defaultPositive = {
+            backgroundColor: '#ECFDF3',
+            borderColor: '#A7F3D0',
+            textColor: '#52C41A',
+        };
+        const defaultNegative = {
+            backgroundColor: '#FEF3F2',
+            borderColor: '#FECACA',
+            textColor: '#D92D20',
+        };
+        
+        const defaults = isPositive ? defaultPositive : defaultNegative;
+        
+        return {
+            changeColor: change.color || defaults.backgroundColor,
+            changeBorderColor: change.borderColor || defaults.borderColor,
+            changeTextColor: change.textColor || defaults.textColor,
+        };
+    };
+
+    const changeColors = getChangeColors();
+    const isPositive = change?.direction !== 'down';
+
+    // Check if change value is 0 (handle both number and string formats like "0", "0%", "0.0%")
+    const isChangeZero = () => {
+        if (!change || !change.value) return true;
+        const valueStr = String(change.value).replace(/[%,]/g, '').trim();
+        const numValue = parseFloat(valueStr);
+        return isNaN(numValue) || numValue === 0;
+    };
+
+    const shouldShowChange = change && !isChangeZero();
+
+    return (
+        <Style {...changeColors}>
+            <div className="stat-card-header">
+                <h3 className="stat-card-title">{title}</h3>
+                {icon && (       
+                        <div className="stat-card-icon">
+                            <CustomIcon name={icon} width={24} height={24} />
+                        </div>          
+                )}
+            </div>
+            <div className="stat-card-content">
+                <h2 className="stat-card-value">{value}</h2>
+                {shouldShowChange && (
+                    <Tooltip 
+                        title={
+                            change.tooltipText || 
+                            (isPositive 
+                                ? `Increased by ${change.value}` 
+                                : `Decreased by ${change.value}`)
+                        }
+                    >
+                        <div className="stat-card-change">
+                            <div className="change-icon">
+                                {isPositive ? (
+                                    <>
+                                        <CustomIcon 
+                                            name="Up" 
+                                            width={10} 
+                                            height={10} 
+                                            color={changeColors.changeTextColor}
+                                        />
+                                    </>
+                                ) : (
+                                    <>
+                                        <CustomIcon 
+                                            name="Down" 
+                                            width={10} 
+                                            height={10} 
+                                            color={changeColors.changeTextColor}
+                                        />
+                                    </>
+                                )}
+                            </div>
+                            <span className="change-value">{change.value}</span>
+                        </div>
+                    </Tooltip>
+                )}
+            </div>
+        </Style>
+    );
+}
+
+export default StatCard;

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

@@ -0,0 +1,83 @@
+import styled from 'styled-components';
+
+const Style = styled.div`
+    background: #ffffff;
+    border-radius: 8px;
+    border: 1px solid #E5E7EB;
+    padding: var(--size-lg);
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    height: 100%;
+    min-height: 120px;
+    width: 100%;
+    min-width: 300px;
+
+    .stat-card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        margin-bottom: auto;
+    }
+
+    .stat-card-title {
+        font-size: 14px;
+        font-weight: 500;
+        color: #6C737F;
+        line-height: 100%;
+        letter-spacing: 0%;
+        margin: 0;
+    }
+
+    .stat-card-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #6C737F;
+    }
+
+    .stat-card-content {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+        margin-top: auto;
+    }
+
+    .stat-card-value {
+        font-size: 32px;
+        font-weight: 600;
+        color: #384250;
+        margin: 0;
+        line-height: 1.2;
+        letter-spacing: 0%;
+    }
+
+    .stat-card-change {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        padding: 1px 8px;
+        border-radius: 4px;
+        border: 1px solid ${props => props.changeBorderColor || '#A7F3D0'};
+        background-color: ${props => props.changeColor || '#ECFDF3'};
+        
+        .change-icon {
+            display: flex;
+            align-items: center;
+            gap: 2px;
+            color: ${props => props.changeTextColor || '#52C41A'};
+        }
+
+        .change-value {
+            font-size: 12px;
+            font-weight: 500;
+            line-height: 18px;
+            letter-spacing: 0%;
+            color: ${props => props.changeTextColor || '#52C41A'};
+            margin: 0;
+        }
+    }
+`;
+
+export default Style;
+

package/src/@daf/core/components/Icon/configs/Down.js

@@ -0,0 +1,8 @@
+const config = {
+    viewBox: '0 0 11 10',
+    children: (
+        <path d="M7.75 0.75V6.25M7.75 6.25L5.75 4.25M7.75 6.25L9.75 4.25M2.75 0.75V8.75M2.75 8.75L0.75 6.75M2.75 8.75L4.75 6.75" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+    ),
+}
+
+export default config;

package/src/@daf/core/components/Icon/configs/Up.js

@@ -0,0 +1,8 @@
+const config = {
+    viewBox: '0 0 11 10',
+    children: (
+        <path d="M2.75 8.75V0.75M2.75 0.75L0.75 2.75M2.75 0.75L4.75 2.75M7.75 8.75V3.25M7.75 3.25L5.75 5.25M7.75 3.25L9.75 5.25" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+    ),
+}
+
+export default config;

package/src/@daf/core/components/Icon/configs/index.js

@@ -226,6 +226,8 @@ import ClockPlus from "./ClockPlus";
 import WaziDarkIcon from "./WaziDarkIcon";	
 import SpacingHeight from "./SpacingHeight";
 import SpacingWidth from "./SpacingWidth";
+import Up from "./Up";
+import Down from "./Down";
 
 const config = {
 	AppAdmin,
@@ -456,6 +458,8 @@ const config = {
 	WaziDarkIcon,
 	SpacingHeight,
 	SpacingWidth,
+	Up,
+	Down,
 };
 
 export default config;

package/src/@daf/core/components/Icon/configs/partnerIcon.js

@@ -1,7 +1,7 @@
 const config = {
 	viewBox: "0 0 18 14",
 	children: (
-        <path d="M5.08333 2.53462H0.75V8.75H1.50141C2.09639 8.75 2.67622 8.93763 3.15841 9.2862L7.44192 12.3827C7.74723 12.6034 8.15773 12.6105 8.47051 12.4006C8.95317 12.0765 9.00645 11.3867 8.5793 10.9924L6.81667 9.36538L9.68494 11.9601C9.95925 12.2082 10.366 12.2412 10.6767 12.0404C11.0996 11.7672 11.1772 11.1801 10.8398 10.8064L9.15 8.93462L11.4946 11.4923C11.828 11.8561 12.3838 11.9055 12.7762 11.6063C13.2258 11.2635 13.2802 10.607 12.8932 10.1948L11.0167 8.19615L13.3903 10.686C13.711 11.0223 14.2308 11.0702 14.6075 10.7981C15.0685 10.4651 15.1251 9.79991 14.727 9.39379L14.2167 8.87308M16.75 8.57952V2.79983M16.75 8.57952C16.75 8.57952 16.75 5.25112 16.75 2.79983M16.75 8.57952C16.75 8.72136 16.662 8.85066 16.5235 8.91219L15.2216 9.49081C15.0608 9.56228 14.8682 9.52676 14.7494 9.40375L8.66241 3.09692C8.52364 2.95315 8.28848 2.93195 8.1222 3.04823L7.31667 3.61154C6.63455 4.08854 5.73081 4.19895 4.93775 3.90217L4.14065 3.60388C3.96864 3.53951 3.93837 3.32657 4.08656 3.22341L6.64053 1.44562C7.4038 0.914316 8.33376 0.75 9.28973 0.75H9.89529C10.373 0.75 10.8476 0.821816 11.3003 0.962629L16.4777 2.44993C16.6404 2.50054 16.75 2.64134 16.75 2.79983" stroke="#722ED1" strokeWidth="1.5" strokeLinejoin="round"/>
+        <path d="M5.08333 2.53462H0.75V8.75H1.50141C2.09639 8.75 2.67622 8.93763 3.15841 9.2862L7.44192 12.3827C7.74723 12.6034 8.15773 12.6105 8.47051 12.4006C8.95317 12.0765 9.00645 11.3867 8.5793 10.9924L6.81667 9.36538L9.68494 11.9601C9.95925 12.2082 10.366 12.2412 10.6767 12.0404C11.0996 11.7672 11.1772 11.1801 10.8398 10.8064L9.15 8.93462L11.4946 11.4923C11.828 11.8561 12.3838 11.9055 12.7762 11.6063C13.2258 11.2635 13.2802 10.607 12.8932 10.1948L11.0167 8.19615L13.3903 10.686C13.711 11.0223 14.2308 11.0702 14.6075 10.7981C15.0685 10.4651 15.1251 9.79991 14.727 9.39379L14.2167 8.87308M16.75 8.57952V2.79983M16.75 8.57952C16.75 8.57952 16.75 5.25112 16.75 2.79983M16.75 8.57952C16.75 8.72136 16.662 8.85066 16.5235 8.91219L15.2216 9.49081C15.0608 9.56228 14.8682 9.52676 14.7494 9.40375L8.66241 3.09692C8.52364 2.95315 8.28848 2.93195 8.1222 3.04823L7.31667 3.61154C6.63455 4.08854 5.73081 4.19895 4.93775 3.90217L4.14065 3.60388C3.96864 3.53951 3.93837 3.32657 4.08656 3.22341L6.64053 1.44562C7.4038 0.914316 8.33376 0.75 9.28973 0.75H9.89529C10.373 0.75 10.8476 0.821816 11.3003 0.962629L16.4777 2.44993C16.6404 2.50054 16.75 2.64134 16.75 2.79983" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/>
 	),
 };
 

package/src/@daf/core/components/Sidenav/Menu.jsx

@@ -468,9 +468,9 @@ export default function SidenavMenu({
                           className={formatClassname([
                             typeof selectedKeys[0] === "string"
                               ? !!(
-                                selectedKeys[0].includes(subitem.path) ||
+                                matchPath({ path: subitem.path, exact: true }, selectedKeys[0]) ||
                                 (subitem.subPath || []).find((p) =>
-                                  matchPath(p, selectedKeys[0])
+                                  matchPath({ path: p, exact: true }, selectedKeys[0])
                                 )
                               ) && "selected-label"
                               : "",
@@ -494,9 +494,9 @@ export default function SidenavMenu({
                       className: formatClassname([
                         typeof selectedKeys[0] === "string"
                           ? !!(
-                            selectedKeys[0].includes(subitem.path) ||
+                            matchPath({ path: subitem.path, exact: true }, selectedKeys[0]) ||
                             (subitem.subPath || []).find((p) =>
-                              matchPath(p, selectedKeys[0])
+                              matchPath({ path: p, exact: true }, selectedKeys[0])
                             )
                           ) && "selected-it"
                           : "",

package/src/@daf/pages/Summary/Activities/PlantingCycle/components/AssociatedInformation/index.jsx

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import { Widget } from '../../../../../../../../src/index.js';
+
+const ACTIVITIES_TAB = 'activities';
+const PARTNERS_TAB = 'partners';
+const INCIDENTS_TAB = 'incidents';
+
+
+const AssociatedInformation = ({ 
+    activityData, 
+    loading = false, 
+    t = (s) => s 
+}) => {
+    const [activeTab, setActiveTab] = useState(ACTIVITIES_TAB);
+
+    return (
+        <section>
+
+              <Widget 
+                className="v2-widget no-px h-w-btn-header no-p-body"
+                title={t("Associated Information")}
+                tabsConfig={{
+                    tabs: [
+                        { label: t("straatos::activities"), value: ACTIVITIES_TAB },
+                        { label: t("straatos::partners"), value: PARTNERS_TAB },
+                        { label: t("straatos::incidents"), value: INCIDENTS_TAB },
+                    ],
+                    value: activeTab,
+                    onChange: (value) => {
+                        setActiveTab(value);
+                        // setData([]);
+                    },
+                }}
+            >
+            <div>
+            </div>
+        </Widget>
+        </section>
+    );
+};
+
+export default AssociatedInformation;
+