datastake-daf 0.6.767 → 0.6.769

package/src/@daf/pages/Stakeholders/index.jsx

@@ -1,12 +1,6 @@
-import React, { useMemo, useState, useEffect, useCallback } from 'react'
-import TablePageWithTabs from '../../core/components/Screens/TableScreen/TablePageWithTabs/index.jsx'
+import React from 'react'
 import { getColumns } from './columns.js';
-import { checkboxConfig, getFiltersConfig, filtersConfig, getFilterOptions } from './config.js';
-import { useGetQueryParams } from '../../hooks/useGetQueryParams.js';
-import StakeholdersCreate from './create.jsx';
-import { displayMessage } from '../../../helpers/messages.js';
-import DAFHeader from '../../core/components/Header/index.jsx';
-import { useFetchData } from '../hook.js';
+import TablePage from '../TablePage/index.jsx';
 
 const StakeholdersTable = ({
     t = () => {},
@@ -38,109 +32,59 @@ const StakeholdersTable = ({
     subjectClear = () => {},
     breadcrumbs = [],
     extendingFilters = {},
+    createDefaultValues = {},
 }) => {
-    const [selectOptions, setSelectOptions] = useState();
-    const [activeTab, setActiveTab] = useState("own");
-    const columns = useMemo(() => getColumns({
-        t, 
-        goTo, 
-        user,
-        options,
-        activeTab,
-        getRedirectLink, 
-        theme,
-        subject: 'stakeholders',
-        applications,
-    }), [t, goTo, user, options, activeTab, getRedirectLink, theme, applications]);
-
-    useFetchData({
-        location,
-        getData,
-        activeTab,
-        extendingFilters,
-        subject: 'stakeholders',
-    })
-
-    const selectFiltersConfig = useMemo(() => {
-        return getFiltersConfig({t});
-    }, [t]);
-
-    useEffect(() => {
-        setSelectOptions((prev) => ({
-          ...prev,
-          ...getFilterOptions(options, t),
-        }))
-      }, [options, t])
-
-    const handleActiveTabChange = useCallback((value) => {
-        setActiveTab(value);
-    }, []);
-
-    useEffect(
-		() => () => {
-			subjectClear();
-		},
-		[],
-	);
-
     return (
-        <TablePageWithTabs 
-           t={t}
-           title={t("Stakeholders")}
-           breadCrumbs={breadcrumbs}
-           location={location}
-           loading={loading}
-           goTo={goTo}
-           defaultActiveTab={"own"}
-           columns={columns}
-           data={data}
-           checkboxConfig={checkboxConfig}
-           APP={APP}
-           getApiBaseUrl={getApiBaseUrl}
-           selectOptions={selectOptions}
-           selectFiltersConfig={selectFiltersConfig}
-           getRedirectLink={getRedirectLink}
-           filtersConfig={filtersConfig}
-           isMobile={isMobile}
-           view="stakeholders"
-           getActiveTab={handleActiveTabChange}
-           onDownload={() => {
-            console.log("download");
-           }}
-           drawerTitle={t("Create Stakeholder")}
-        >
-            {({onDrawerClose}) => (
-                <StakeholdersCreate 
-                    t={t}
-                    goTo={goTo}
-                    user={user}
-                    APP={APP}
-                    getApiBaseUrl={getApiBaseUrl}
-                    getAppHeader={getAppHeader}
-                    getData={getFormData}
-                    saveData={saveFormData}
-                    loading={formLoading}
-                    onSubmitted={(type, m, data) => {
-                        if (data.datastakeId) {
-                            displayMessage(
-                                type,
-                                t("affirmations::subject-created-successfully") || m,
-                            );
-                            goTo(`/app/edit/stakeholders/${data.datastakeId}`);
-                        }
-                    }}
-                    onCancel={onDrawerClose}
-                    query={query}
-                    ajaxForms={ajaxForms}
-                    changeAjaxForms={changeAjaxForms}
-                    ajaxOptions={ajaxOptions}
-                    changeAjaxOptions={changeAjaxOptions}
-                    formData={formData}
-                    formValue={formValue}
-                    form={form}
-                />
-            )}
-        </TablePageWithTabs>
+        <TablePage
+            t={t}
+            goTo={goTo}
+            user={user}
+            options={options}
+            getRedirectLink={getRedirectLink}
+            theme={theme}
+            loading={loading}
+            data={data}
+            isMobile={isMobile}
+            APP={APP}
+            location={location}
+            applications={applications}
+            
+            subject="stakeholders"
+            getData={getData}
+            getApiBaseUrl={getApiBaseUrl}
+            getAppHeader={getAppHeader}
+            subjectClear={subjectClear}
+            getColumns={getColumns}
+            
+            viewConfig={{
+                title: "Stakeholders",
+                breadcrumbs: breadcrumbs,
+                createTitle: "Create Stakeholder",
+            }}
+            
+            extendingFilters={extendingFilters}
+            
+            formConfig={{
+                getFormData,
+                saveFormData,
+                formLoading,
+                query,
+                ajaxForms,
+                changeAjaxForms,
+                ajaxOptions,
+                changeAjaxOptions,
+                formData,
+                formValue,
+                form,
+                namespace: 'stakeholders',
+                view: 'scoping',
+                scope: 'create',
+                formType: 'stakeholder',
+                defaultValues: createDefaultValues,
+            }}
+            
+            onDownload={() => console.log("download")}
+        />
     )
 }
 

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;
+

package/src/@daf/pages/Summary/Activities/PlantingCycle/components/CommunityParticipation/CommunityStats/helper.js

@@ -0,0 +1,60 @@
+import { calculateStatChange } from '../../../helper.js';
+
+/**
+ * Calculates the change for day jobs stat
+ * @param {Object} dayJobs - Object with current and previous day jobs values
+ * @param {Function} t - Translation function
+ * @returns {Object|null} Change object for StatCard or null if data is invalid
+ */
+export const calculateDayJobsChange = (dayJobs, t) => {
+    if (!dayJobs) return null;
+    return calculateStatChange(
+        {
+            current: Number(dayJobs.current) || 0,
+            previous: Number(dayJobs.previous) || 0,
+        },
+        {
+            tooltipText: t("In comparison to last cycle"),
+            format: 'absolute',
+        }
+    );
+};
+
+/**
+ * Calculates the change for employed women stat
+ * @param {Object} employedWomen - Object with current and previous employed women values
+ * @param {Function} t - Translation function
+ * @returns {Object|null} Change object for StatCard or null if data is invalid
+ */
+export const calculateEmployedWomenChange = (employedWomen, t) => {
+    if (!employedWomen) return null;
+    return calculateStatChange(
+        {
+            current: Number(employedWomen.current) || 0,
+            previous: Number(employedWomen.previous) || 0,
+        },
+        {
+            tooltipText: t("In comparison to last cycle"),
+            format: 'absolute',
+        }
+    );
+};
+
+/**
+ * Formats the day jobs value for display
+ * @param {Object} dayJobs - Object with current day jobs value
+ * @returns {string} Formatted value string
+ */
+export const formatDayJobsValue = (dayJobs) => {
+    return dayJobs?.current ? Number(dayJobs.current).toLocaleString() : 0;
+};
+
+/**
+ * Formats the employed women value for display
+ * @param {Object} employedWomen - Object with current employed women value
+ * @returns {string} Formatted value string
+ */
+export const formatEmployedWomenValue = (employedWomen) => {
+    return employedWomen?.current ? Number(employedWomen.current).toLocaleString() : 0;
+};
+

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

@@ -0,0 +1,36 @@
+import React, { useMemo } from 'react';
+import { StatCard } from '../../../../../../../../index.js';
+import { calculateDayJobsChange, calculateEmployedWomenChange, formatDayJobsValue, formatEmployedWomenValue } from './helper.js';
+
+const CommunityStats = ({
+    dayJobs,
+    employedWomen,
+    t = (s) => s
+}) => {
+    const dayJobsChange = useMemo(() => calculateDayJobsChange(dayJobs, t), [dayJobs, t]);
+    const employedWomenChange = useMemo(() => calculateEmployedWomenChange(employedWomen, t), [employedWomen, t]);
+
+    return (
+        <div style={{ display: 'flex', gap: '24px', marginBottom: '24px' }}>
+            <section style={{ flex: 1 }}>
+                <StatCard
+                    title={t("Total Jobs")}
+                    value={formatDayJobsValue(dayJobs)}
+                    icon="MineOperators"
+                    change={dayJobsChange}
+                />
+            </section>
+            <section style={{ flex: 1 }}>
+                <StatCard
+                    title={t("Employed Women")}
+                    value={formatEmployedWomenValue(employedWomen)}
+                    icon="GenderFemale"
+                    change={employedWomenChange}
+                />
+            </section>
+        </div>
+    );
+};
+
+export default CommunityStats;
+

package/src/@daf/pages/Summary/Activities/PlantingCycle/components/CommunityParticipation/GenderDistribution/helper.js

@@ -0,0 +1,117 @@
+const GENDER_COLORS = ['#a0ebec', '#00aeb1'];
+
+export const getGenderDistributionData = (genderDistribution) => {
+    if (Array.isArray(genderDistribution) && genderDistribution.length > 0) {
+        const firstItem = genderDistribution[0];
+        
+        if (firstItem && (firstItem.totalFemale !== undefined || firstItem.totalMale !== undefined)) {
+            const totalFemale = genderDistribution.reduce((sum, item) => sum + (Number(item.totalFemale) || 0), 0);
+            const totalMale = genderDistribution.reduce((sum, item) => sum + (Number(item.totalMale) || 0), 0);
+            
+            return {
+                Male: totalMale,
+                Female: totalFemale,
+            };
+        }
+        
+        const distribution = {};
+        genderDistribution.forEach(item => {
+            const gender = item?.gender || item?.label || item?.name || 'Unknown';
+            const count = item?.count || item?.value || item?.total || 0;
+            const normalizedGender = gender.toLowerCase() === 'male' ? 'Male' : 
+                                   gender.toLowerCase() === 'female' ? 'Female' : gender;
+            distribution[normalizedGender] = (distribution[normalizedGender] || 0) + count;
+        });
+        return distribution;
+    }
+    
+    if (genderDistribution && typeof genderDistribution === 'object' && !Array.isArray(genderDistribution)) {
+        if (genderDistribution.genderDistribution && typeof genderDistribution.genderDistribution === 'object') {
+            return genderDistribution.genderDistribution;
+        }
+        
+        if (genderDistribution.totalFemale !== undefined || genderDistribution.totalMale !== undefined) {
+            return {
+                Male: Number(genderDistribution.totalMale) || 0,
+                Female: Number(genderDistribution.totalFemale) || 0,
+            };
+        }
+        
+        if (genderDistribution.Male !== undefined || genderDistribution.Female !== undefined || 
+            genderDistribution.male !== undefined || genderDistribution.female !== undefined) {
+            return {
+                Male: genderDistribution.Male || genderDistribution.male || 0,
+                Female: genderDistribution.Female || genderDistribution.female || 0,
+            };
+        }
+        
+        return genderDistribution;
+    }
+    
+    return {};
+};
+
+/**
+ * Checks if the gender distribution data is empty
+ * @param {Object} genderDistributionData - Distribution object: { "Male": 10, "Female": 5 }
+ * @returns {boolean} True if all values are 0 or empty
+ */
+export const isGenderDistributionEmpty = (genderDistributionData) => {
+    return Object.values(genderDistributionData).every(val => !val || val === 0);
+};
+
+/**
+ * Calculates pie chart data from gender distribution
+ * @param {Object} genderDistributionData - Distribution object: { "Male": 10, "Female": 5 }
+ * @returns {Array} Array of pie chart data points with value, percent, color, label, and key
+ */
+export const calculateGenderPieData = (genderDistributionData) => {
+    const total = Object.values(genderDistributionData).reduce((all, val) => all + (val || 0), 0);
+
+    return Object.keys(genderDistributionData).map((key, index) => {
+        const color = GENDER_COLORS[index % GENDER_COLORS.length];
+
+        return {
+            value: genderDistributionData[key] || 0,
+            percent: total > 0 ? (genderDistributionData[key] || 0) / total : 0,
+            color: color,
+            label: key,
+            key: key,
+        };
+    });
+};
+
+export const getGenderTooltipChildren = (item, isEmpty, genderDistributionData, t, renderTooltipJsx) => {
+    if (isEmpty) {
+        if (!Object.keys(genderDistributionData).length) {
+            return null;
+        }
+
+        return renderTooltipJsx({
+            title: t("Gender Distribution"),
+            items: Object.keys(genderDistributionData).map((k) => ({
+                color: GENDER_COLORS[Object.keys(genderDistributionData).indexOf(k) % GENDER_COLORS.length],
+                label: k,
+                value: '0%',
+            })),
+        });
+    }
+
+    // Calculate total for percentage calculation
+    const total = Object.values(genderDistributionData).reduce((all, val) => all + (val || 0), 0);
+    
+    // Show all gender items with percentages (matching the image format)
+    return renderTooltipJsx({
+        title: t("Gender Distribution"),
+        items: Object.keys(genderDistributionData).map((k, index) => {
+            const value = genderDistributionData[k] || 0;
+            const percent = total > 0 ? Math.round((value / total) * 100) : 0;
+            return {
+                color: GENDER_COLORS[index % GENDER_COLORS.length],
+                label: k,
+                value: `${percent}%`,
+            };
+        }),
+    });
+};
+

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

@@ -0,0 +1,49 @@
+import React, { useMemo, useCallback } from 'react';
+import { Widget, PieChart } from '../../../../../../../../index.js';
+import { getGenderDistributionData, isGenderDistributionEmpty, calculateGenderPieData, getGenderTooltipChildren } from './helper';
+import { renderTooltipJsx } from '../../../../../../../../utils.js';
+
+const GenderDistribution = ({ 
+    genderDistribution, 
+    loading = false, 
+    t = (s) => s 
+}) => {
+    const genderDistributionData = useMemo(() => getGenderDistributionData(genderDistribution), [genderDistribution]);
+    const isEmpty = useMemo(() => isGenderDistributionEmpty(genderDistributionData), [genderDistributionData]);
+    const pieData = useMemo(() => calculateGenderPieData(genderDistributionData), [genderDistributionData]);
+
+    const getTooltipChildren = useCallback(
+        (item) => getGenderTooltipChildren(item, isEmpty, genderDistributionData, t, renderTooltipJsx),
+        [t, isEmpty, genderDistributionData],
+    );
+
+    return (
+        <Widget
+            loading={loading}
+            title={<div>{t("Gender Distribution")}</div>}
+            className="with-border-header h-w-btn-header "
+        >
+            <div
+                style={{
+                    marginTop: "auto",
+                    marginBottom: "auto",
+                }}
+            >
+                <PieChart
+                    mouseXOffset={10}
+                    mouseYOffset={10}
+                    changeOpacityOnHover={false}
+                    data={pieData}
+                    doConstraints={false}
+                    isPie
+                    t={t}
+                    isEmpty={isEmpty}
+                    getTooltipChildren={getTooltipChildren}
+                />
+            </div>
+        </Widget>
+    );
+};
+
+export default GenderDistribution;
+