datastake-daf 0.6.745 → 0.6.747

package/dist/services/index.js

@@ -1188,7 +1188,7 @@ class SourceService extends BaseService {
     id
   }) {
     return this.apiGet({
-      url: `/${type}/sources-for-subject/${id}`
+      url: `/${type}/sources/${id}`
     });
   }
 }
@@ -1435,8 +1435,30 @@ var LinkedSubjects = createLazyService(LinkedSubjectsService);
 
 class OperatorService extends BaseService {
   get(params) {
+    const {
+      datastakeId,
+      ...rest
+    } = params;
+    if (datastakeId) {
+      return this.apiGet({
+        url: `/stakeholder/${datastakeId}`,
+        params: {
+          ...rest
+        },
+        isApp: true
+      });
+    }
     return this.apiGet({
       url: "/stakeholder",
+      params: {
+        ...rest
+      },
+      isApp: true
+    });
+  }
+  getOne(id, params) {
+    return this.apiGet({
+      url: `/stakeholder/${id}`,
       params,
       isApp: true
     });

package/package.json

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

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

@@ -1,9 +1,9 @@
 import React, { useState, useRef } from "react";
 import CarouselWidget from "../CarouselWidget/index.jsx";
-import { Image, Carousel } from "antd";
+import { Image, Carousel, Empty } from "antd";
 import { LeftOutlined, RightOutlined } from "@ant-design/icons";
 import CustomArrowButton from "./components/CustomArrowButton/index.js";
-import { StyledCarouselWrapper } from "./style.js";
+import { StyledCarouselWrapper, EmptyStateContainer } from "./style.js";
 import PropTypes from "prop-types";
 
 /**
@@ -45,6 +45,8 @@ import PropTypes from "prop-types";
  * @param {string} [props.arrowIconColor="#666"] - Default color of arrow icons
  * @param {string} [props.arrowHoverIconColor="#1890ff"] - Color of arrow icons on hover
  * @param {boolean} [props.customArrows=false] - Whether to show custom navigation arrows
+ * @param {ReactNode} [props.emptyLogo] - Custom logo/icon for empty state (defaults to Ant Design simple empty icon)
+ * @param {string|ReactNode} [props.emptyText="No Image"] - Custom text for empty state
  * @param {Object} [props.rest] - Additional props passed to the underlying CarouselWidget component
  * 
  * @features
@@ -74,6 +76,8 @@ function ImageCarousel({
   arrowIconColor = "#666",
   arrowHoverIconColor = "#1890ff",
   customArrows = false,
+  emptyLogo = Empty.PRESENTED_IMAGE_SIMPLE,
+  emptyText = "No Image",
   ...rest
 }) {
   const [previewVisible, setPreviewVisible] = useState(false);
@@ -92,7 +96,11 @@ function ImageCarousel({
     carouselRef.current?.next();
   };
 
-
+  // Check if images array is empty or has no valid images
+  const hasImages = images && images.length > 0 && images.some(image => {
+    const imageSrc = typeof image === "string" ? image : image?.src;
+    return imageSrc && imageSrc.trim().length > 0;
+  });
   return (
     <>
       <StyledCarouselWrapper 
@@ -108,38 +116,47 @@ function ImageCarousel({
           infinite
           dots={false}
         >
-        <Carousel ref={carouselRef} afterChange={handleCarouselChange} arrows={false} {...rest}  infinite>
-          {images.map((image, index) => {
-            const imageSrc = typeof image === "string" ? image : image.src;
-            const imageAlt =
-              typeof image === "string"
-                ? `${title} - Image ${index + 1}`
-                : image.alt;
+          {hasImages ? (
+            <Carousel ref={carouselRef} afterChange={handleCarouselChange} arrows={false} {...rest} infinite>
+              {images.map((image, index) => {
+                const imageSrc = typeof image === "string" ? image : image.src;
+                const imageAlt =
+                  typeof image === "string"
+                    ? `${title} - Image ${index + 1}`
+                    : image.alt;
 
-            return (
-              <div key={imageSrc}>
-                <div className="image-container">
-                  <Image
-                    src={imageSrc}
-                    alt={imageAlt}
-                    fallback={fallback}
-                    loading="lazy"
-                    preview={{
-                      visible: false,
-                    }}
-                    onClick={() => {
-                      setCurrent(index);
-                      setPreviewVisible(true);
-                    }}
-                  />
-                </div>
-              </div>
-            );
-          })}
-        </Carousel>
+                return (
+                  <div key={imageSrc}>
+                    <div className="image-container">
+                      <Image
+                        src={imageSrc}
+                        alt={imageAlt}
+                        fallback={fallback}
+                        loading="lazy"
+                        preview={{
+                          visible: false,
+                        }}
+                        onClick={() => {
+                          setCurrent(index);
+                          setPreviewVisible(true);
+                        }}
+                      />
+                    </div>
+                  </div>
+                );
+              })}
+            </Carousel>
+          ) : (
+            <EmptyStateContainer height={height}>
+              <Empty 
+                image={emptyLogo || Empty.PRESENTED_IMAGE_SIMPLE}
+                description={<span style={{ color: '#8C8C8C' }}>{emptyText}</span>}
+              />
+            </EmptyStateContainer>
+          )}
         </CarouselWidget>
         
-        {customArrows && images && images.length > 1 && (
+        {customArrows && hasImages && images.length > 1 && (
           <>
             <CustomArrowButton
               icon={<LeftOutlined />}
@@ -158,29 +175,31 @@ function ImageCarousel({
         )}
       </StyledCarouselWrapper>
 
-      <div style={{ display: "none" }}>
-        <Image.PreviewGroup
-          preview={{
-            visible: previewVisible,
-            current,
-            onVisibleChange: (vis) => setPreviewVisible(vis),
-            onChange: (idx) => {
-              setCurrent(idx);
-              carouselRef.current?.goTo(idx);
-            },
-          }}
-        >
-          {images.map((image, index) => {
-            const imageSrc = typeof image === "string" ? image : image.src;
-            const imageAlt =
-              typeof image === "string"
-                ? `${title} - Image ${index + 1}`
-                : image.alt;
+      {hasImages && (
+        <div style={{ display: "none" }}>
+          <Image.PreviewGroup
+            preview={{
+              visible: previewVisible,
+              current,
+              onVisibleChange: (vis) => setPreviewVisible(vis),
+              onChange: (idx) => {
+                setCurrent(idx);
+                carouselRef.current?.goTo(idx);
+              },
+            }}
+          >
+            {images.map((image, index) => {
+              const imageSrc = typeof image === "string" ? image : image.src;
+              const imageAlt =
+                typeof image === "string"
+                  ? `${title} - Image ${index + 1}`
+                  : image.alt;
 
-            return <Image key={imageSrc} src={imageSrc} alt={imageAlt} />;
-          })}
-        </Image.PreviewGroup>
-      </div>
+              return <Image key={imageSrc} src={imageSrc} alt={imageAlt} />;
+            })}
+          </Image.PreviewGroup>
+        </div>
+      )}
     </>
   );
 }
@@ -195,6 +214,8 @@ ImageCarousel.propTypes = {
   arrowIconColor: PropTypes.string,
   arrowHoverIconColor: PropTypes.string,
   customArrows: PropTypes.bool,
+  emptyLogo: PropTypes.node,
+  emptyText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 };
 
 export default ImageCarousel;

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

@@ -42,4 +42,48 @@ export const StyledCarouselWrapper = styled.div`
     margin-bottom: -3px !important;
   }
 
+`;
+
+export const EmptyStateContainer = styled.div`
+  width: 100%;
+  height: ${props => props.height || 400}px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #ffffff;
+  border-radius: 6px;
+  position: relative;
+
+  .ant-empty {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+  }
+
+  .ant-empty-image {
+    margin-bottom: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .ant-empty-description {
+    text-align: center;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 8px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 40px;
+    height: 2px;
+    background-color: #722ed1;
+    border-radius: 1px;
+  }
 `;

package/src/@daf/core/components/Screens/TableScreen/TablePageWithTabs/index.jsx

@@ -0,0 +1,128 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { Tabs, Drawer } from 'antd'
+import Header from '../../../Header/index.jsx'
+import BaseScreen from '../../BaseScreen/index.jsx'
+import { CREATE_DRAWER_WIDTH } from '../../../../../../helpers/Forms.js'
+import DrawerHeader from '../../../Header/DrawerHeader/index.jsx'
+
+const TablePageWithTabs = ({
+    t= () => {},
+    title,
+    breadCrumbs,
+    location,
+    loading = false,
+    goTo = () => {},
+    defaultActiveTab = "own",
+    checkboxConfig = {},
+    columns = [],
+    data = {},
+    APP,
+    getApiBaseUrl = () => {},
+    selectOptions = {},
+    selectFiltersConfig = {},
+    getRedirectLink = () => {},
+    filtersConfig = {},
+    isMobile,
+    view,
+    getActiveTab = () => {},
+    onDownload = () => {},
+    downloadDisabled = false,
+    drawerTitle = "",
+    onCreateModalClose = () => {},
+    children
+}) => {
+    const params = new URLSearchParams(location?.search);
+    const [activeTab, setActiveTab] = useState(params.get("tab") || defaultActiveTab);
+    const [openCreateModal, setOpenCreateModal] = useState(params.has("create"));
+
+    const getActiveTabRef = useRef(getActiveTab);
+    useEffect(() => {
+        getActiveTabRef.current = getActiveTab;
+    }, [getActiveTab]);
+
+    useEffect(() => {
+        getActiveTabRef.current(activeTab);
+    }, [activeTab]);
+
+    return (
+        <div className="semibold form-input-output daf-create-view">
+            <Header 
+                title={t(title)}
+                breadcrumbs={breadCrumbs}
+                actionButtons={[
+					{
+						type: "primary",
+						onClick: () => setOpenCreateModal(true),
+						tooltip: t("New"),
+						icon: "Add",
+					},
+				]}
+                onDownload={onDownload}
+                downloadDisabled={downloadDisabled}
+            />
+            <Tabs
+                items={[
+                    { label: t("All Data"), key: "all" },
+                    { label: t("Own Data"), key: "own" },
+                    { label: t("Partners"), key: "shared" },
+                ]}
+                defaultActiveKey={activeTab}
+                activeKey={activeTab}
+                onChange={(val) => {
+                    if (loading) {
+                        return;
+                    }
+        
+                    setActiveTab(val);
+                        
+                    const newParams = new URLSearchParams(location?.search);
+                    newParams.set("tab", val);
+                    goTo(`${location.pathname}?${newParams.toString()}`);
+                }}
+                className="view-page-tabs mt-3"
+            />
+            <BaseScreen 
+                t={t}
+                checkboxConfig={checkboxConfig}
+                defaultTableFilters={{}}
+                columns={columns}
+                data={data}
+                loading={loading}
+                location={location}
+                goTo={goTo}
+                APP={APP}
+                getApiBaseUrl={getApiBaseUrl}
+                selectOptions={selectOptions}
+                selectFilters={selectFiltersConfig}
+                view={view}
+                getRedirectLink={getRedirectLink}
+                defaultUrlParams={{}}
+                module={APP}
+                filtersConfig={filtersConfig}
+                isMobile={isMobile}
+            />
+            {openCreateModal && (
+                <Drawer
+                    destroyOnHidden
+                    title={
+                        <DrawerHeader 
+                            title={t(drawerTitle)}
+                        />
+                    }
+                    open={openCreateModal}
+                    onClose={() => setOpenCreateModal(false)}
+                    width={CREATE_DRAWER_WIDTH}
+                    bodyStyle={{ padding: 0 }}
+                >
+                {typeof children === 'function' 
+                    ? children({ onDrawerClose: () => setOpenCreateModal(false) })
+                    : children
+                }
+                </Drawer>
+            )}
+
+        </div>
+    )
+}
+
+export default TablePageWithTabs

package/src/@daf/{pages/pages → core/components/TableScreen}/TablePageWithTabs/index.jsx

@@ -1,9 +1,9 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { Tabs, Drawer } from 'antd'
-import Header from '../../../core/components/Header/index.jsx'
-import BaseScreen from '../../../core/components/Screens/BaseScreen/index.jsx'
+import Header from '../../../Header/index.jsx'
+import BaseScreen from '../../BaseScreen/index.jsx'
 import { CREATE_DRAWER_WIDTH } from '../../../../helpers/Forms.js'
-import DrawerHeader from '../../../core/components/Header/DrawerHeader/index.jsx'
+import DrawerHeader from '../../../Header/DrawerHeader/index.jsx'
 
 const TablePageWithTabs = ({
     t= () => {},

package/src/@daf/hooks/useSources.js

@@ -82,7 +82,7 @@ export default function useSource({ user = {}, t = () => {}, getData = () => {},
 
 export const useSources = ({type, id, user, t = () => {}}) => {
 	function getData(params) {
-		if(id) {
+		if(id !== undefined && id !== null) {
 			return SourceService.getSources({type, id});
 		} else {
 			return SourceService.get(null, params);

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

@@ -1,5 +1,5 @@
 import React, { useMemo, useState, useEffect, useCallback } from 'react'
-import TablePageWithTabs from '../pages/TablePageWithTabs/index.jsx'
+import TablePageWithTabs from '../../core/components/Screens/TableScreen/TablePageWithTabs/index.jsx'
 import { getColumns } from './columns.js';
 import { checkboxConfig, getFiltersConfig, filtersConfig, getFilterOptions } from './config.js';
 import { useGetQueryParams } from '../../hooks/useGetQueryParams.js';

package/src/@daf/pages/Events/Activities/index.jsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useState, useEffect, useCallback } from 'react'
-import TablePageWithTabs from '../../pages/TablePageWithTabs/index.jsx'
+import TablePageWithTabs from '../../../core/components/Screens/TableScreen/TablePageWithTabs/index.jsx'
 import { getColumns } from './columns.js';
 import { checkboxConfig, getFiltersConfig, filtersConfig, getFilterOptions } from './config.js';
 import { useGetQueryParams } from '../../../hooks/useGetQueryParams.js';

package/src/@daf/pages/Events/Incidents/index.jsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useState, useEffect, useCallback } from 'react'
-import TablePageWithTabs from '../../pages/TablePageWithTabs/index.jsx'
+import TablePageWithTabs from '../../../core/components/Screens/TableScreen/TablePageWithTabs/index.jsx'
 import { getColumns } from './columns.js';
 import { checkboxConfig, getFiltersConfig, filtersConfig, getFilterOptions } from './config.js';
 import { useGetQueryParams } from '../../../hooks/useGetQueryParams.js';

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

@@ -1,5 +1,5 @@
 import React, { useMemo, useState, useEffect, useCallback } from 'react'
-import TablePageWithTabs from '../pages/TablePageWithTabs/index.jsx'
+import TablePageWithTabs from '../../core/components/Screens/TableScreen/TablePageWithTabs/index.jsx'
 import { getColumns } from './columns.js';
 import { checkboxConfig, getFiltersConfig, filtersConfig, getFilterOptions } from './config.js';
 import { useGetQueryParams } from '../../hooks/useGetQueryParams.js';

package/src/@daf/pages/Locations/MineSite/index.jsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useState, useEffect, useCallback } from 'react'
-import TablePageWithTabs from '../../pages/TablePageWithTabs/index.jsx'
+import TablePageWithTabs from '../../../core/components/Screens/TableScreen/TablePageWithTabs/index.jsx'
 import { getColumns } from './columns.js';
 import { checkboxConfig, getFiltersConfig, filtersConfig, getFilterOptions } from './config.js';
 import { useGetQueryParams } from '../../../hooks/useGetQueryParams.js';

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

@@ -1,5 +1,5 @@
 import React, { useMemo, useState, useEffect, useCallback } from 'react'
-import TablePageWithTabs from '../pages/TablePageWithTabs/index.jsx'
+import TablePageWithTabs from '../../core/components/Screens/TableScreen/TablePageWithTabs/index.jsx'
 import { getColumns } from './columns.js';
 import { checkboxConfig, getFiltersConfig, filtersConfig, getFilterOptions } from './config.js';
 import { useGetQueryParams } from '../../hooks/useGetQueryParams.js';

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

@@ -1,5 +1,5 @@
 import React, { useMemo, useState, useEffect, useCallback } from 'react'
-import TablePageWithTabs from '../../pages/TablePageWithTabs/index.jsx'
+import TablePageWithTabs from '../../../core/components/Screens/TableScreen/TablePageWithTabs/index.jsx'
 import { getColumns } from './columns.js';
 import { checkboxConfig, getFiltersConfig, filtersConfig, getFilterOptions } from './config.js';
 import { useGetQueryParams } from '../../../hooks/useGetQueryParams.js';

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

@@ -1,5 +1,5 @@
 import React, { useMemo, useState, useEffect, useCallback } from 'react'
-import TablePageWithTabs from '../../pages/TablePageWithTabs/index.jsx'
+import TablePageWithTabs from '../../../core/components/Screens/TableScreen/TablePageWithTabs/index.jsx'
 import { getColumns } from './columns.js';
 import { checkboxConfig, getFiltersConfig, filtersConfig, getFilterOptions } from './config.js';
 import { useGetQueryParams } from '../../../hooks/useGetQueryParams.js';

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

@@ -1,5 +1,5 @@
 import React, { useMemo, useState, useEffect, useCallback } from 'react'
-import TablePageWithTabs from '../pages/TablePageWithTabs/index.jsx'
+import TablePageWithTabs from '../../core/components/Screens/TableScreen/TablePageWithTabs/index.jsx'
 import { getColumns } from './columns.js';
 import { checkboxConfig, getFiltersConfig, filtersConfig, getFilterOptions } from './config.js';
 import { useGetQueryParams } from '../../hooks/useGetQueryParams.js';

package/src/@daf/pages/Summary/Activities/Restoration/config.js

@@ -0,0 +1,36 @@
+import React from "react";
+
+export const getKeyIndicatorsRowConfig = ({ t, data = {} }) => [
+
+  {
+    label: t('Primary Data Collection'),
+    render: () => {
+      let displayValue = '-';
+      
+      if (data?.origin?.[0]?.name === 'straatos') {
+        displayValue = data?.author?.name || '-';
+      } else if (data?.formCompleterType === 'localRelay') {
+        displayValue = 'Relay (Allcot Senegal)';
+      } else if (data?.formCompleterType === 'technicalPartner') {
+        displayValue = data?.technicalPartner?.name || '-';
+      } else {
+        displayValue = data?.author?.name || '-';
+      }
+      
+      return <div className="flex">{displayValue}</div>;
+    }
+  },
+  {
+    label: t('Implementation Partner'),
+    render: () => <div>{data?.technicalPartner?.name || '-'}</div>
+  },
+  {
+    label: t('Activity Participants'),
+    render: () => <div>{'0'}</div>
+  },
+  {
+    label: t('Hectares Planted'),
+    render: () => <div>{data?.hectaresPlanted || '0 ha'}</div>
+  },
+
+];

package/src/@daf/pages/Summary/Activities/Restoration/helper.js

@@ -0,0 +1,98 @@
+// ============================================================================
+// REGION: Photo/Image Extraction
+// ============================================================================
+
+/**
+ * Extract images from a photo document
+ * Handles both documents with pictures arrays and direct image objects
+ */
+export const extractFromPhotoDoc = (photoDoc, label, docIndex) => {
+    const photos = photoDoc?.pictures?.filter(p => p?.url) || (photoDoc?.url ? [photoDoc] : []);
+    
+    return photos.map((photo, photoIndex) => ({
+        src: normalizeUrl(photo.url),
+        alt: photo.name || photo.alt || `${label} - Image ${docIndex + 1}-${photoIndex + 1}`
+    }));
+};
+
+/**
+ * Normalize URL by removing trailing colon if present
+ */
+const normalizeUrl = (url) => url?.endsWith(':') ? url.slice(0, -1) : url;
+
+// ============================================================================
+// REGION: Gender Distribution
+// ============================================================================
+
+// Gender distribution colors for pie chart
+const GENDER_COLORS = ['#016C6E', '#00AEB1']; // Male (dark teal), Female (light teal)
+
+/**
+ * Get gender distribution data from activityData
+ * Maps genderDistributionMale and genderDistributionFemale to a structured object
+ */
+export const getGenderDistributionData = (activityData) => {
+    return {
+        Male: activityData?.genderDistributionMale || 0,
+        Female: activityData?.genderDistributionFemale || 0,
+    };
+};
+
+/**
+ * Check if gender distribution is empty
+ * Returns true if all values are 0 or falsy
+ */
+export const isGenderDistributionEmpty = (genderDistributionData) => {
+    return Object.values(genderDistributionData).every(val => !val || val === 0);
+};
+
+/**
+ * Calculate pie chart data from gender distribution
+ * Computes percentages and assigns colors based on gender distribution values
+ */
+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,
+        };
+    });
+};
+
+/**
+ * Get tooltip children for gender distribution pie chart
+ * Generates tooltip content showing gender label and value
+ */
+export const getGenderTooltipChildren = (item, isEmpty, genderDistributionData, t, renderTooltipJsx) => {
+    if (isEmpty) {
+        if (!Object.keys(genderDistributionData).length) {
+            return null;
+        }
+
+        return renderTooltipJsx({
+            title: t("Gender"),
+            items: Object.keys(genderDistributionData).map((k) => ({
+                label: k,
+                value: 0,
+            })),
+        });
+    }
+
+    return renderTooltipJsx({
+        title: t("Gender"),
+        items: [
+            {
+                color: item.color,
+                label: t(item.label),
+                value: `${item.value || 0}`,
+            },
+        ],
+    });
+};