datastake-daf 0.6.745 → 0.6.746

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/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}`,
+            },
+        ],
+    });
+};

package/src/@daf/pages/Summary/Activities/Restoration/index.jsx

@@ -0,0 +1,178 @@
+import { useMemo, useCallback } from 'react';
+import { DashboardLayout, Header, ImageCarousel, KeyIndicators, MineSiteMap, Widget, PieChart } from '../../../../../../src/index.js'
+import { getKeyIndicatorsRowConfig } from './config';
+import { extractFromPhotoDoc, getGenderDistributionData, isGenderDistributionEmpty, calculateGenderPieData, getGenderTooltipChildren } from './helper';
+import { renderTooltipJsx } from '../../../../../../src/utils';
+import { useResizeContext } from '../../../../../../src/context';
+
+const RestorationActivitySummary = ({ activityData, supportText, onDownload, downloadDisabled, actionButtons, breadcrumbs, goBackTo, loading, t = () => { } }) => {
+    const { isCollapsed, isNestedSidebarCollapsed } = useResizeContext();
+    const keyIndicatorsConfig = useMemo(() => getKeyIndicatorsRowConfig({ t, data: activityData }), [t, activityData]);
+    const images = useMemo(() => {
+
+        const photoArrays = [
+            { data: activityData?.groupPhotos, label: 'Group Photo' },
+            { data: activityData?.photosStartActivity, label: 'Start of Activity' },
+            { data: activityData?.photosDuringActivity, label: 'During Activity' },
+            { data: activityData?.photosEndActivity, label: 'End of Activity' }
+        ];
+
+        return photoArrays
+            .flatMap(({ data, label }) =>
+                Array.isArray(data)
+                    ? data.flatMap((photoDoc, index) => extractFromPhotoDoc(photoDoc, label, index))
+                    : []
+            );
+    }, [activityData]);
+    const genderDistributionData = useMemo(() => getGenderDistributionData(activityData), [activityData]);
+    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 (
+        <DashboardLayout
+            header={
+                <Header
+                    title={'Restoration Activity Summary'}
+                    supportText={supportText || ''}
+                    onDownload={onDownload}
+                    downloadDisabled={downloadDisabled}
+                    actionButtons={actionButtons}
+                    breadcrumbs={breadcrumbs}
+                    goBackTo={goBackTo}
+                    loading={loading}
+                />
+            }
+        >
+            <section>
+                <KeyIndicators title={t("Key Information")} config={keyIndicatorsConfig} loading={loading} />
+            </section>
+
+            <section>
+                <Widget
+                    title={t("Activity Location")}
+                    className="no-px no-pb-body"
+                    style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
+                >
+                    <div style={{ flex: 1, minHeight: 0 }}>
+                        <MineSiteMap
+                            loading={loading}
+                            t={t}
+                            isSatellite={true}
+                            app={"straatos"}
+                            showSider={false}
+                            user={null}
+                            data={[
+                                {
+                                    _id: {},
+                                    id: "7f2aaed4-4b2e-406c-8e0a-6659c5c8367b",
+                                    color: "#6698E4",
+                                    parent: {
+                                        _id: {},
+                                        createdAt: "2024-06-13T14:51:55.296Z",
+                                        updatedAt: "2024-06-13T14:51:55.296Z",
+                                        id: "a5340bf1-2c7d-413f-a2a5-ccd7dc8f7a7c",
+                                        name: "New Mine",
+                                        authorId: "4e6066e9-00d8-423a-94ec-c7c9d3432fec",
+                                        collectId: "f8a2b6a9cc935ef3e5844427f49aade34e152eca",
+                                        country: "AL",
+                                        category: "mineSite",
+                                        datastakeId: "LOC-00000000141",
+                                        __v: 0,
+                                    },
+                                    administrativeLevel1: "6839cb26-5af4-44a3-b136-a0f0a0bcecc6",
+                                    administrativeLevel2: "f849835d-5640-4bee-ae98-9f1c810c1abe",
+                                    // "name": "New Mine",
+                                    country: "AL",
+                                    category: "mineSite",
+                                    authorId: "4e6066e9-00d8-423a-94ec-c7c9d3432fec",
+                                    gps: {
+                                        latitude: 7,
+                                        longitude: 1,
+                                    },
+                                    area: [
+                                        [6, 5],
+                                        [7, 1],
+                                        [9, 2],
+                                    ],
+                                    associatedSubjects: [
+                                        {
+                                            entity: "Event",
+                                            _id: {},
+                                            nature: "",
+                                        },
+                                    ],
+                                    published: false,
+                                    version: 1,
+                                    createdAt: "2024-06-13T14:51:55.296Z",
+                                    updatedAt: "2024-06-13T14:51:55.296Z",
+                                    name: "Name",
+                                    type: "Loc Type",
+                                    __v: 0,
+                                    datastakeId: "LOC-00000000141",
+                                },
+                            ]}
+                            // tooltipAsText: true,
+                            primaryLink={true}
+                            renderTooltip={() => {
+                                return [
+                                    {
+                                        label: "Name",
+                                        value: "Name",
+                                    },
+                                ];
+                            }}
+                            center={[13, -15]}
+                            mapConfig={{ maxZoom: 18 }}
+                            type={'territory'}
+                            link={true}
+                            onClickLink={() => { }}
+                        />
+                    </div>
+                </Widget>
+            </section>
+
+            <section>
+                <div style={{ maxWidth: "70%", width: "calc(100% - 405px)" }}>
+                    <ImageCarousel
+                        loading={loading}
+                        images={images}
+                        title={t("straatos::activity-imagery")}
+                        key={`${isCollapsed}-${isNestedSidebarCollapsed}`}
+                        customArrows={true}
+                        activeDotColor="#003435"
+                    />
+                </div>
+                <Widget
+                    loading={loading}
+                    title={<div>{t("Workers 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>
+            </section>
+        </DashboardLayout>
+    )
+}
+
+export default RestorationActivitySummary;

package/src/@daf/pages/Summary/operator/index.jsx

@@ -0,0 +1,76 @@
+import React, { useMemo, useEffect } from 'react'
+import CustomIcon from '../../../core/components/Icon/CustomIcon.jsx';
+import DashboardLayout from '../../../core/components/Dashboard/DashboardLayout/index.jsx';
+import Header from '../../../core/components/Header/index.jsx';
+import Multiselect from '../../../core/components/Select/MultiSelect/index.jsx';
+
+function OperatorSummary({
+  t = () => { },
+  goTo = () => { },
+  getRedirectLink = () => { },
+  theme = {},
+  user = {},
+  options = {},
+  partners,
+  selectedPartners,
+  setSelectedPartners,
+  informationSources,
+  hardcodedData,
+  breadCrumbs = [],
+}) {
+
+  const sourceOptions = useMemo(() => {
+    if (!partners?.length) return [];
+
+    return partners?.map((partner) => {
+      const isOwnData = partner.id === user?.company?.id;
+
+      return {
+        label: partner.nickName,
+        value: partner.id,
+        avatar: isOwnData ? <span>OWN</span> : <CustomIcon name={"Search02"} size={14} />,
+        background: isOwnData ? theme.colorPrimary7 : undefined,
+        color: isOwnData ? "white" : undefined,
+      };
+    });
+  }, [partners, user]);
+
+  useEffect(() => {
+    window.theme = theme;
+  }, [theme])
+
+
+  return (
+    <DashboardLayout
+      header={
+        <Header
+          title={t('Operator Summary')}
+          addedHeader={
+            <div>
+              <Multiselect
+                options={[...sourceOptions]}
+                isAvatarGroup
+                selectionType="checkbox"
+                canUnselectLast={false}
+                key={partners?.length}
+                onChange={(selected) => {
+                  setSelectedPartners((prev) => ({
+                    ...prev,
+                    partners: selected,
+                    loading: false,
+                  }));
+                }}
+                dropDownWidth={200}
+                defaultSelected={partners?.map((p) => p.id) || []}
+              />
+            </div>
+          }
+          breadcrumbs={breadCrumbs}
+        />
+      }
+    >
+    </DashboardLayout>
+  )
+}
+
+export default OperatorSummary;

package/src/pages.js

@@ -1,6 +1,6 @@
 // Dashboards
-export { default as SupplyChainDashboard } from './@daf/pages/dashboards/SupplyChain/index.jsx';
-export { default as UserDashboard } from './@daf/pages/dashboards/UserDashboard/index.jsx';
+export { default as SupplyChainDashboard } from './@daf/pages/Dashboards/SupplyChain/index.jsx';
+export { default as UserDashboard } from './@daf/pages/Dashboards/UserDashboard/index.jsx';
 export { default as OperatorsTable } from './@daf/pages/Stakeholders/Operators/index.jsx';
 export { default as LocationsTable } from './@daf/pages/Locations/index.jsx';
 export { default as StakeholdersTable } from './@daf/pages/Stakeholders/index.jsx';
@@ -12,6 +12,8 @@ export { default as ActivitiesTable } from './@daf/pages/Events/Activities/index
 export { default as IncidentsTable } from './@daf/pages/Events/Incidents/index.jsx';
 export { default as ProductionSitesTable } from './@daf/pages/Locations/MineSite/index.jsx';
 
-// Pages
-export { default as TablePageWithTabs } from './@daf/pages/pages/TablePageWithTabs/index.jsx';
+
+// Summary
+export { default as OperatorSummary } from './@daf/pages/Summary/operator/index.jsx';
+export { default as RestorationActivitySummary } from './@daf/pages/Summary/Activities/Restoration/index.jsx';