datastake-daf 0.6.768 → 0.6.770

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

@@ -1,34 +1,20 @@
-import { useMemo, useCallback } from 'react';
-import { DashboardLayout, Header, ImageCarousel, KeyIndicators, MineSiteMap, Widget, PieChart, ActivityIndicators } from '../../../../../../src/index.js'
+import { useMemo } from 'react';
+import { DashboardLayout, Header, KeyIndicators, ActivityIndicators } from '../../../../../../src/index.js'
 import { getKeyIndicatorsRowConfig } from './config';
-import { getActivityImages, getGenderDistributionData, isGenderDistributionEmpty, calculateGenderPieData, getGenderTooltipChildren, getActivityIndicatorsConfig, getMapDataFromActivity } from './helper';
-import { renderTooltipJsx } from '../../../../../../src/utils';
-import { convertDMS } from '../../../../../../src/helpers/Map';
-import { useResizeContext } from '../../../../../../src/context';
-import CustomIcon from '../../../../../../src/@daf/core/components/Icon/CustomIcon.jsx';
+import { getActivityIndicatorsConfig } from './helper';
+import ActivityLocation from './components/ActivityLocation/index.jsx';
+import ActivityImagery from './components/ActivityImagery/index.jsx';
+import WorkersDistribution from './components/WorkersDistribution/index.jsx';
 
 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(() => getActivityImages(activityData), [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],
-    );
-   
     // Activity Indicators Config - mapped from activityData
-    const activityIndicatorsConfig = useMemo(() => 
+    const activityIndicatorsConfig = useMemo(() =>
         getActivityIndicatorsConfig(activityData, t),
         [activityData, t]
     );
 
-    // Map Data - transformed from activityData
-    const mapData = useMemo(() => getMapDataFromActivity(activityData, t), [activityData, t]);
-
     return (
         <DashboardLayout
             header={
@@ -48,126 +34,18 @@ const RestorationActivitySummary = ({ activityData, supportText, onDownload, dow
                 <KeyIndicators title={t("Key Information")} config={keyIndicatorsConfig} loading={loading} />
             </section>
 
-            <section>
-                <Widget
-                    title={t("Activity Location")}
-                    className="no-px h-w-btn-header no-pt-body  no-p-body 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"}
-                            type={'location-territory'}
-                            showSider={false}
-                            user={null}
-                            data={mapData}
-                            maxZoom={18}
-                            primaryLink={true}
-                            style={{ height: '100%', width: '100%' }}
-                            renderTooltipForLocation={(data) => {
-                                const coordinates = data.gps?.latitude && data.gps?.longitude
-                                    ? convertDMS(data.gps.latitude, data.gps.longitude)
-                                    : null;
-
-                                if (!coordinates) {
-                                    return [];
-                                }
-
-                                const isActivityEnd = data.name === t("Activity End") || data.id?.includes('-departure');
-                                const iconColor = isActivityEnd ? "#FF7A45" : "#016C6E";
-
-                                return [
-                                    {
-                                        label: t("Coordinates"),
-                                      
-                                        value: (
-                                            <div style={{ display: 'flex', alignItems: 'center', gap: '6px', flexWrap: 'nowrap' }}>
-                                                {/* Latitude icon (vertical) */}
-                                                <div style={{ display: 'flex', alignItems: 'center' }}>
-                                                    <CustomIcon 
-                                                        name="SpacingHeight" 
-                                                        width={14} 
-                                                        height={14} 
-                                                        color={iconColor}
-                                                    />
-                                                    <span style={{ fontWeight: 600, marginLeft: '4px' }}>{coordinates[0]}</span>
-                                                </div>
-                                                {/* Longitude icon (horizontal) */}
-                                                <div style={{ display: 'flex', alignItems: 'center' }}>
-                                                    <CustomIcon 
-                                                        name="SpacingWidth" 
-                                                        width={14} 
-                                                        height={14} 
-                                                        color={iconColor}
-                                                    />
-                                                    <span style={{ fontWeight: 600, marginLeft: '4px' }}>{coordinates[1]}</span>
-                                                </div>
-                                            </div>
-                                        ),
-                                    },
-                                ];
-                            }}
-                            renderTooltipForTerritory={(data) => {
-                                return [
-                                    {
-                                        label: t("Plot Name"),
-                                        value: data.plotName || data.name || "--",
-                                    },
-                                ];
-                            }}
-                            link={true}
-                        />
-                    </div>
-                </Widget>
-            </section>
+            <ActivityLocation activityData={activityData} loading={loading} t={t} />
 
-            <section>
-                <ActivityIndicators 
-                    config={activityIndicatorsConfig}
-                    loading={loading}
-                    title={t("Activity Indicators")}
-                    className="small-content"
-                />
-            </section>
+            <ActivityIndicators
+                config={activityIndicatorsConfig}
+                loading={loading}
+                title={t("Activity Indicators")}
+                className="small-content"
+            />
 
             <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>
+                <ActivityImagery activityData={activityData} loading={loading} t={t} />
+                <WorkersDistribution activityData={activityData} loading={loading} t={t} />
             </section>
         </DashboardLayout>
     )

package/src/index.js

@@ -77,6 +77,7 @@ export { default as ProjectWidget } from "./@daf/core/components/Dashboard/Widge
 export { default as WidgetCard } from "./@daf/core/components/Dashboard/Widget/WidgetCard/index.js";
 export { default as CarouselWidget } from "./@daf/core/components/Dashboard/Widget/CarouselWidget/index.jsx";
 export { default as ImageCarousel } from "./@daf/core/components/Dashboard/Widget/ImageCarousel/index.jsx";
+export { default as StatCard } from "./@daf/core/components/Dashboard/Widget/StatCard/index.js";
 // export { default as WidgetCatalogue } from "./@daf/core/components/Dashboard/Widget/WidgetCatalogue/index.jsx";
 
 // Forms