datastake-daf 0.6.744 → 0.6.746

package/src/@daf/pages/{dashboards/Operations/ProductionSites → Locations/MineSite}/index.jsx

@@ -1,10 +1,10 @@
 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';
+import { useGetQueryParams } from '../../../hooks/useGetQueryParams.js';
 import ProductionSitesCreate from './create.jsx';
-import { displayMessage } from '../../../../../helpers/messages.js';
+import { displayMessage } from '../../../../helpers/messages.js';
 
 const ProductionSitesTable = ({
     t = () => {},
@@ -36,7 +36,7 @@ const ProductionSitesTable = ({
     createDefaultValues = {},
 }) => {
     const [selectOptions, setSelectOptions] = useState();
-    const [activeTab, setActiveTab] = useState();
+    const [activeTab, setActiveTab] = useState('own');
 
     const columns = useMemo(() => getColumns({
         t, 
@@ -97,7 +97,7 @@ const ProductionSitesTable = ({
            location={location}
            loading={loading}
            goTo={goTo}
-           defaultActiveTab={"all"}
+           defaultActiveTab={"own"}
            columns={columns}
            data={data}
            checkboxConfig={checkboxConfig}

package/src/@daf/pages/{dashboards/AllInformation/Locations → Locations}/columns.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Tooltip } from 'antd';
-import { findOptions } from '../../../../../helpers/StringHelper.js';
-import { renderDateFormatted } from '../../../../../helpers/Forms.js';
-import CustomIcon from '../../../../core/components/Icon/CustomIcon.jsx';
-import AvatarGroup from '../../../../core/components/AvatarGroup/index.jsx';
-import sourceAvatarConfig from '../../../../../helpers/sourceAvatarConfig.js';
+import { findOptions } from '../../../helpers/StringHelper.js';
+import { renderDateFormatted } from '../../../helpers/Forms.js';
+import CustomIcon from '../../core/components/Icon/CustomIcon.jsx';
+import AvatarGroup from '../../core/components/AvatarGroup/index.jsx';
+import sourceAvatarConfig from '../../../helpers/sourceAvatarConfig.js';
 
 const getLinkValue = (value, linkingObject) => {
   if(linkingObject && linkingObject?.[value]) {

package/src/@daf/pages/{dashboards/AllInformation/Locations → Locations}/create.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect} from 'react'
 import { message } from 'antd';
-import { MessageTypes } from '../../../../../helpers/messages.js';
-import DynamicForm from '../../../../core/components/DynamicForm/index.jsx';
+import { MessageTypes } from '../../../helpers/messages.js';
+import DynamicForm from '../../core/components/DynamicForm/index.jsx';
 
 const StakeholdersCreate = ({
     namespace = 'locations',

package/src/@daf/pages/{dashboards/AllInformation/Locations → Locations}/index.jsx

@@ -1,10 +1,10 @@
 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';
+import { useGetQueryParams } from '../../hooks/useGetQueryParams.js';
 import StakeholdersCreate from './create.jsx';
-import { displayMessage } from '../../../../../helpers/messages.js';
+import { displayMessage } from '../../../helpers/messages.js';
 
 const LocationsTable = ({
     t = () => {},
@@ -36,7 +36,7 @@ const LocationsTable = ({
     subjectClear = () => {},
 }) => {
     const [selectOptions, setSelectOptions] = useState();
-    const [activeTab, setActiveTab] = useState();
+    const [activeTab, setActiveTab] = useState("own");
 
     const columns = useMemo(() => getColumns({
         t, 
@@ -96,7 +96,7 @@ const LocationsTable = ({
            location={location}
            loading={loading}
            goTo={goTo}
-           defaultActiveTab={"all"}
+           defaultActiveTab={"own"}
            columns={columns}
            data={data}
            checkboxConfig={checkboxConfig}

package/src/@daf/pages/{dashboards/Operations → Stakeholders}/Operators/columns.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Tooltip } from 'antd';
-import { findOptions } from '../../../../../helpers/StringHelper.js';
-import { renderDateFormatted } from '../../../../../helpers/Forms.js';
-import CustomIcon from '../../../../core/components/Icon/CustomIcon.jsx';
-import AvatarGroup from '../../../../core/components/AvatarGroup/index.jsx';
-import sourceAvatarConfig from '../../../../../helpers/sourceAvatarConfig.js';
+import { findOptions } from '../../../../helpers/StringHelper.js';
+import { renderDateFormatted } from '../../../../helpers/Forms.js';
+import CustomIcon from '../../../core/components/Icon/CustomIcon.jsx';
+import AvatarGroup from '../../../core/components/AvatarGroup/index.jsx';
+import sourceAvatarConfig from '../../../../helpers/sourceAvatarConfig.js';
 
 const getLinkValue = (value, linkingObject) => {
   if(linkingObject && linkingObject?.[value]) {

package/src/@daf/pages/{dashboards/Operations → Stakeholders}/Operators/create.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect} from 'react'
 import { message } from 'antd';
-import { MessageTypes } from '../../../../../helpers/messages.js';
-import DynamicForm from '../../../../core/components/DynamicForm/index.jsx';
+import { MessageTypes } from '../../../../helpers/messages.js';
+import DynamicForm from '../../../core/components/DynamicForm/index.jsx';
 
 const StakeholdersCreate = ({
     namespace = "OPERATOR",

package/src/@daf/pages/{dashboards/Operations → Stakeholders}/Operators/index.jsx

@@ -1,10 +1,10 @@
 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';
+import { useGetQueryParams } from '../../../hooks/useGetQueryParams.js';
 import StakeholdersCreate from './create.jsx';
-import { displayMessage } from '../../../../../helpers/messages.js';
+import { displayMessage } from '../../../../helpers/messages.js';
 
 const OperatorsTable = ({
     t = () => {},
@@ -37,7 +37,7 @@ const OperatorsTable = ({
     applications = [],
 }) => {
     const [selectOptions, setSelectOptions] = useState();
-    const [activeTab, setActiveTab] = useState();
+    const [activeTab, setActiveTab] = useState('own');
 
     const columns = useMemo(() => getColumns({
         t, 
@@ -99,7 +99,7 @@ const OperatorsTable = ({
            location={location}
            loading={loading}
            goTo={goTo}
-           defaultActiveTab={"all"}
+           defaultActiveTab={"own"}
            columns={columns}
            data={data}
            checkboxConfig={checkboxConfig}

package/src/@daf/pages/{dashboards/Operations → Stakeholders}/Workers/columns.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Tooltip, Tag } from 'antd';
-import { findOptions } from '../../../../../helpers/StringHelper.js';
-import { renderDateFormatted } from '../../../../../helpers/Forms.js';
-import CustomIcon from '../../../../core/components/Icon/CustomIcon.jsx';
-import AvatarGroup from '../../../../core/components/AvatarGroup/index.jsx';
-import sourceAvatarConfig from '../../../../../helpers/sourceAvatarConfig.js';
+import { findOptions } from '../../../../helpers/StringHelper.js';
+import { renderDateFormatted } from '../../../../helpers/Forms.js';
+import CustomIcon from '../../../core/components/Icon/CustomIcon.jsx';
+import AvatarGroup from '../../../core/components/AvatarGroup/index.jsx';
+import sourceAvatarConfig from '../../../../helpers/sourceAvatarConfig.js';
 
 const getLinkValue = (value, linkingObject) => {
   if(linkingObject && linkingObject?.[value]) {
@@ -137,7 +137,7 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
 
             const sources = sourceAvatarConfig(val, user, applications);
 
-            return <AvatarGroup items={val}></AvatarGroup>;
+          return <AvatarGroup items={sources}></AvatarGroup>;
         },
     },    
     {

package/src/@daf/pages/{dashboards/Operations → Stakeholders}/Workers/create.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect} from 'react'
 import { message } from 'antd';
-import { MessageTypes } from '../../../../../helpers/messages.js';
-import DynamicForm from '../../../../core/components/DynamicForm/index.jsx';
+import { MessageTypes } from '../../../../helpers/messages.js';
+import DynamicForm from '../../../core/components/DynamicForm/index.jsx';
 
 const StakeholdersCreate = ({
     namespace = "WORKERS",

package/src/@daf/pages/{dashboards/Operations → Stakeholders}/Workers/index.jsx

@@ -1,10 +1,10 @@
 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';
+import { useGetQueryParams } from '../../../hooks/useGetQueryParams.js';
 import StakeholdersCreate from './create.jsx';
-import { displayMessage } from '../../../../../helpers/messages.js';
+import { displayMessage } from '../../../../helpers/messages.js';
 
 const WorkersTable = ({
     t = () => {},
@@ -37,7 +37,7 @@ const WorkersTable = ({
     applications = [],
 }) => {
     const [selectOptions, setSelectOptions] = useState();
-    const [activeTab, setActiveTab] = useState();
+    const [activeTab, setActiveTab] = useState('own');
 
     const columns = useMemo(() => getColumns({
         t, 
@@ -99,7 +99,7 @@ const WorkersTable = ({
            location={location}
            loading={loading}
            goTo={goTo}
-           defaultActiveTab={"all"}
+           defaultActiveTab={"own"}
            columns={columns}
            data={data}
            checkboxConfig={checkboxConfig}

package/src/@daf/pages/{dashboards/AllInformation/Documents → Stakeholders}/columns.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Tooltip } from 'antd';
-import { findOptions } from '../../../../../helpers/StringHelper.js';
-import { renderDateFormatted } from '../../../../../helpers/Forms.js';
-import CustomIcon from '../../../../core/components/Icon/CustomIcon.jsx';
-import AvatarGroup from '../../../../core/components/AvatarGroup/index.jsx';
-import sourceAvatarConfig from '../../../../../helpers/sourceAvatarConfig.js';
+import { findOptions } from '../../../helpers/StringHelper.js';
+import { renderDateFormatted } from '../../../helpers/Forms.js';
+import CustomIcon from '../../core/components/Icon/CustomIcon.jsx';
+import AvatarGroup from '../../core/components/AvatarGroup/index.jsx';
+import sourceAvatarConfig from '../../../helpers/sourceAvatarConfig.js';
 
 export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink, theme, subject, applications}) => [
     {

package/src/@daf/pages/{dashboards/AllInformation/Stakeholders → Stakeholders}/create.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect} from 'react'
 import { message } from 'antd';
-import { MessageTypes } from '../../../../../helpers/messages.js';
-import DynamicForm from '../../../../core/components/DynamicForm/index.jsx';
+import { MessageTypes } from '../../../helpers/messages.js';
+import DynamicForm from '../../core/components/DynamicForm/index.jsx';
 
 const StakeholdersCreate = ({
     namespace = 'stakeholders',

package/src/@daf/pages/{dashboards/AllInformation/Stakeholders → Stakeholders}/index.jsx

@@ -1,10 +1,10 @@
 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';
+import { useGetQueryParams } from '../../hooks/useGetQueryParams.js';
 import StakeholdersCreate from './create.jsx';
-import { displayMessage } from '../../../../../helpers/messages.js';
+import { displayMessage } from '../../../helpers/messages.js';
 
 const StakeholdersTable = ({
     t = () => {},
@@ -36,7 +36,7 @@ const StakeholdersTable = ({
     subjectClear = () => {},
 }) => {
     const [selectOptions, setSelectOptions] = useState();
-    const [activeTab, setActiveTab] = useState();
+    const [activeTab, setActiveTab] = useState("own");
     const columns = useMemo(() => getColumns({
         t, 
         goTo, 
@@ -92,7 +92,7 @@ const StakeholdersTable = ({
            location={location}
            loading={loading}
            goTo={goTo}
-           defaultActiveTab={"all"}
+           defaultActiveTab={"own"}
            columns={columns}
            data={data}
            checkboxConfig={checkboxConfig}

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;