datastake-daf 0.6.747 → 0.6.749

package/src/@daf/pages/Locations/MineSite/columns.js

@@ -4,7 +4,7 @@ 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 MoreMenu from '../../../core/components/Table/MoreMenu/index.jsx';
 const getLinkValue = (value, linkingObject) => {
   if(linkingObject && linkingObject?.[value]) {
     return linkingObject?.[value]?.name;
@@ -86,7 +86,7 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
             return <AvatarGroup items={val}></AvatarGroup>;
         },
     },
-    ,    {
+    {
         dataIndex: 'operator',
         title: t('Operator'),
         ellipsis: true,
@@ -129,22 +129,57 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
           return status ? <Tooltip title={status}>{status}</Tooltip> : '-';
         },
     },
-    {
-      id: 'actions',
-      title: "",
-      width: 60,
-      render: (_, all) => {
-        if (all.empty) {
-          return <div className="daf-default-cell" />;
+    
+      {
+        title: t("Sources"),
+        dataIndex: 'source',
+        ellipsis: true,
+        show: activeTab !== "own",
+        render: (v, all) => {
+          if (all.empty) {
+            return <div className="daf-default-cell" />
+          }
+          const source = findOptions(v, data?.options?.sourceOptions);
+          return source ? <Tooltip title={source}>{source}</Tooltip> : '-';
+        },
+      },
+      {
+        id: 'actions',
+        title: "",
+        width: 60,
+        render: (_, all) => {
+          if (all.empty) {
+            return <div className="daf-default-cell" />;
+          }
+          const onClick = () => {
+            const link = `/app/view/${subject}/${all.datastakeId}`;
+            if (activeTab === "shared") {
+              link += `?sourceId=${all?.authorId?.id}`;
+            }
+            goTo(getRedirectLink(link));
+          };
+          const moreMenuItems = [
+            {
+              label: t("Details"),
+              value: "details",
+              onClick: onClick,
+            },
+            {
+              label: t("Summary"),
+              value: "Summary",
+              onClick: () => {
+                let link = `/app/mine-summary/${all.datastakeId}`
+                if (activeTab === "shared") {
+                  link += `?sourceId=${all?.authorId?.id}`;
+                }
+                goTo(getRedirectLink(link));
+              },
+              // disabled: true,
+            },
+          ];
+          return <div >
+               <MoreMenu items={moreMenuItems} />
+          </div>;
         }
-
-        const link = `/app/view/${subject}/${all.datastakeId}`;
-
-        return <div style={{ display: "flex", justifyContent: "center" }}>
-						<a href={getRedirectLink(link)}>
-							<CustomIcon name="Link" size={15} color={theme.baseGray70} />
-						</a>
-			</div>;
       }
-    }
 ].filter((column) => column.show !== false);

package/src/@daf/pages/Locations/columns.js

@@ -5,7 +5,7 @@ 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 MoreMenu from '../../core/components/Table/MoreMenu/index.jsx';
 const getLinkValue = (value, linkingObject) => {
   if(linkingObject && linkingObject?.[value]) {
     return linkingObject?.[value]?.name;
@@ -71,8 +71,8 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
         },
     },      
     {
-        dataIndex: 'administrativeLevel1',
-        title: t('Region'),
+        dataIndex: 'province',
+        title: t('Province'),
         ellipsis: true,
         show: true,
         render: (v, all) => {
@@ -80,14 +80,14 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
             return <div className="daf-default-cell" />
           }
 
-          const region = getLinkValue(v, all?.linking?.SCL);
+          const province = getLinkValue(v, all?.linking?.SCL);
 
-          return region ? <Tooltip title={region}>{region}</Tooltip> : '-';
+          return province ? <Tooltip title={province}>{province}</Tooltip> : '-';
         },
     },    
     {
-        dataIndex: 'administrativeLevel2',
-        title: t('District'),
+        dataIndex: 'territory',
+        title: t('Territory'),
         ellipsis: true,
         show: true,
         render: (v, all) => {
@@ -95,11 +95,26 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
             return <div className="daf-default-cell" />
           }
 
-          const district = getLinkValue(v, all?.linking?.SCL);
+          const territory = getLinkValue(v, all?.linking?.SCL);
 
-          return district ? <Tooltip title={district}>{district}</Tooltip> : '-';
+          return territory ? <Tooltip title={territory}>{territory}</Tooltip> : '-';
         },
     },     
+    {
+      title: t("Sources"),
+      dataIndex: "sources",
+      key: "sources",
+      show: activeTab !== "own",
+      render: (val, all) => {
+          if (all.empty) {
+              return <div className="daf-default-cell" />;
+          }
+
+          const sources = sourceAvatarConfig(val, user, applications);
+
+          return <AvatarGroup items={sources}></AvatarGroup>;
+      },
+  },
     {
         title: t("Last Update"),
         dataIndex: "updatedAt",
@@ -115,21 +130,7 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
         },
         ellipsis: true,
     },
-    {
-        title: t("Sources"),
-        dataIndex: "sources",
-        key: "sources",
-        show: activeTab !== "own",
-        render: (val, all) => {
-            if (all.empty) {
-                return <div className="daf-default-cell" />;
-            }
-
-            const sources = sourceAvatarConfig(val, user, applications);
-
-            return <AvatarGroup items={sources}></AvatarGroup>;
-        },
-    },
+   
     {
       id: 'actions',
       title: "",
@@ -138,14 +139,35 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
         if (all.empty) {
           return <div className="daf-default-cell" />;
         }
-
-        const link = `/app/view/${subject}/${all.datastakeId}`;
-
-        return <div style={{ display: "flex", justifyContent: "center" }}>
-						<a href={getRedirectLink(link)}>
-							<CustomIcon name="Link" size={15} color={theme.baseGray70} />
-						</a>
-			</div>;
+        const onClick = () => {
+          const link = `/app/view/${subject}/${all.datastakeId}`;
+          if (activeTab === "shared") {
+            link += `?sourceId=${all?.authorId?.id}`;
+          }
+          goTo(getRedirectLink(link));
+        };
+        const moreMenuItems = [
+          {
+            label: t("Details"),
+            value: "details",
+            onClick: onClick,
+          },
+          {
+            label: t("Summary"),
+            value: "Summary",
+            onClick: () => {
+              let link = `/app/summary/${subject}/${all.datastakeId}`
+              if (activeTab === "shared") {
+                link += `?sourceId=${all?.authorId?.id}`;
+              }
+              goTo(getRedirectLink(link));
+            },
+            // disabled: true,
+          },
+        ];
+        return <div >
+             <MoreMenu items={moreMenuItems} />
+        </div>;
       }
     }
 ].filter((column) => column.show !== false);

package/src/@daf/pages/Locations/config.js

@@ -13,7 +13,16 @@ export const getFiltersConfig = ({t}) => {
 			getLabel: (option) => option.label,
 			getValue: (option) => option.value,
 		},
-    }
+		category:{
+			type: 'select',
+			label: 'Category',
+			placeholder: (t) => `${t('Filter by')} ${t('Category').toLowerCase()}`,
+			style: { flex: 1 },
+			labelStyle: { flex: 1 },
+			getLabel: (option) => option.label,
+			getValue: (option) => option.value,
+		}
+	}
 }
 
 export const filtersConfig = {
@@ -22,9 +31,10 @@ export const filtersConfig = {
 };
 
 export const getFilterOptions = (options, t) => {
-	const { countries } = options || {};
+	const { countries = [], category = [] } = options || {};
 	const _default  = {
 		country: countries,
+		category: category,
 	}
 
 	return _default;

package/src/@daf/pages/Stakeholders/Operators/columns.js

@@ -5,7 +5,7 @@ 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 MoreMenu from '../../../core/components/Table/MoreMenu/index.jsx';
 const getLinkValue = (value, linkingObject) => {
   if(linkingObject && linkingObject?.[value]) {
     return linkingObject?.[value]?.name;
@@ -99,7 +99,22 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
 
           return district ? <Tooltip title={district}>{district}</Tooltip> : '-';
         },
-    },     
+    },    
+    {
+      title: t("Last Update"),
+      dataIndex: "updatedAt",
+      key: "updatedAt",
+      width: 125,
+      render: (date, all) => {
+          if (all.empty) {
+              return <div className="daf-default-cell" />;
+          }
+
+          const _date = date ? renderDateFormatted(date, "DD MMM YYYY", user?.language || 'en') : "-";
+          return <Tooltip title={_date}>{_date}</Tooltip>;
+      },
+      ellipsis: true,
+  }, 
     {
         title: t("Sources"),
         dataIndex: "sources",
@@ -116,20 +131,19 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
         },
     },
     {
-        title: t("Last Update"),
-        dataIndex: "updatedAt",
-        key: "updatedAt",
-        width: 125,
-        render: (date, all) => {
-            if (all.empty) {
-                return <div className="daf-default-cell" />;
-            }
-
-            const _date = date ? renderDateFormatted(date, "DD MMM YYYY", user?.language || 'en') : "-";
-            return <Tooltip title={_date}>{_date}</Tooltip>;
-        },
+        title: t("Status"),
+        dataIndex: 'status',
         ellipsis: true,
+        show: activeTab == "own",
+        render: (v, all) => {
+          if (all.empty) {
+            return <div className="daf-default-cell" />
+          }
+          const status = findOptions(v, data?.options?.statusOptions);
+          return status ? <Tooltip title={status}>{status}</Tooltip> : '-';
+        },
     },
+   
     {
       id: 'actions',
       title: "",
@@ -138,14 +152,35 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
         if (all.empty) {
           return <div className="daf-default-cell" />;
         }
-
-        const link = `/app/view/${subject}/${all.datastakeId}`;
-
-        return <div style={{ display: "flex", justifyContent: "center" }}>
-						<a href={getRedirectLink(link)}>
-							<CustomIcon name="Link" size={15} color={theme.baseGray70} />
-						</a>
-			</div>;
+        const onClick = () => {
+          const link = `/app/view/${subject}/${all.datastakeId}`;
+          if (activeTab === "shared") {
+            link += `?sourceId=${all?.authorId?.id}`;
+          }
+          goTo(getRedirectLink(link));
+        };
+        const moreMenuItems = [
+          {
+            label: t("Details"),
+            value: "details",
+            onClick: onClick,
+          },
+          {
+            label: t("Summary"),
+            value: "Summary",
+            onClick: () => {
+              let link = `/app/operator-summary/${all.datastakeId}`
+              if (activeTab === "shared") {
+                link += `?sourceId=${all?.authorId?.id}`;
+              }
+              goTo(getRedirectLink(link));
+            },
+            // disabled: true,
+          },
+        ];
+        return <div >
+             <MoreMenu items={moreMenuItems} />
+        </div>;
       }
     }
 ].filter((column) => column.show !== false);

package/src/@daf/pages/Stakeholders/columns.js

@@ -5,7 +5,7 @@ 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 MoreMenu from '../../core/components/Table/MoreMenu/index.jsx';
 export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink, theme, subject, applications}) => [
     {
         dataIndex: 'datastakeId',
@@ -78,21 +78,7 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
           return country ? <Tooltip title={country}>{country}</Tooltip> : '-';
         },
     },     
-    {
-        title: t("Last Update"),
-        dataIndex: "updatedAt",
-        key: "updatedAt",
-        width: 125,
-        render: (date, all) => {
-            if (all.empty) {
-                return <div className="daf-default-cell" />;
-            }
 
-            const _date = date ? renderDateFormatted(date, "DD MMM YYYY", user?.language || 'en') : "-";
-            return <Tooltip title={_date}>{_date}</Tooltip>;
-        },
-        ellipsis: true,
-    },
     {
         title: t("Sources"),
         dataIndex: "sources",
@@ -111,6 +97,21 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
             return <AvatarGroup items={sources}></AvatarGroup>;
         },
     },
+    {
+      title: t("Last Update"),
+      dataIndex: "updatedAt",
+      key: "updatedAt",
+      width: 125,
+      render: (date, all) => {
+          if (all.empty) {
+              return <div className="daf-default-cell" />;
+          }
+
+          const _date = date ? renderDateFormatted(date, "DD MMM YYYY", user?.language || 'en') : "-";
+          return <Tooltip title={_date}>{_date}</Tooltip>;
+      },
+      ellipsis: true,
+  },
     {
       id: 'actions',
       title: "",
@@ -119,14 +120,35 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
         if (all.empty) {
           return <div className="daf-default-cell" />;
         }
-
-        const link = `/app/view/${subject}/${all.datastakeId}`;
-
-        return <div style={{ display: "flex", justifyContent: "center" }}>
-						<a href={getRedirectLink(link)}>
-							<CustomIcon name="Link" size={15} color={theme.baseGray70} />
-						</a>
-			</div>;
+        const onClick = () => {
+          const link = `/app/view/${subject}/${all.datastakeId}`;
+          if (activeTab === "shared") {
+            link += `?sourceId=${all?.authorId?.id}`;
+          }
+          goTo(getRedirectLink(link));
+        };
+        const moreMenuItems = [
+          {
+            label: t("Details"),
+            value: "details",
+            onClick: onClick,
+          },
+          {
+            label: t("Summary"),
+            value: "Summary",
+            onClick: () => {
+              let link = `/app/summary/${subject}/${all.datastakeId}`
+              if (activeTab === "shared") {
+                link += `?sourceId=${all?.authorId?.id}`;
+              }
+              goTo(getRedirectLink(link));
+            },
+            // disabled: true,
+          },
+        ];
+        return <div >
+             <MoreMenu items={moreMenuItems} />
+        </div>;
       }
     }
 ].filter((column) => column.show !== false);

package/src/@daf/pages/Stakeholders/config.js

@@ -13,7 +13,16 @@ export const getFiltersConfig = ({t}) => {
 			getLabel: (option) => option.label,
 			getValue: (option) => option.value,
 		},
-    }
+		category:{
+			type: 'select',
+			label: 'Category',
+			placeholder: (t) => `${t('Filter by')} ${t('Category').toLowerCase()}`,
+			style: { flex: 1 },
+			labelStyle: { flex: 1 },
+			getLabel: (option) => option.label,
+			getValue: (option) => option.value,
+		}
+	}
 }
 
 export const filtersConfig = {
@@ -22,9 +31,10 @@ export const filtersConfig = {
 };
 
 export const getFilterOptions = (options, t) => {
-	const { countries } = options || {};
+	const { countries = [], category = [] } = options || {};
 	const _default  = {
 		country: countries,
+		category: category,
 	}
 
 	return _default;

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

@@ -5,6 +5,7 @@ import { checkboxConfig, getFiltersConfig, filtersConfig, getFilterOptions } fro
 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';
 
 const StakeholdersTable = ({
     t = () => {},

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

@@ -2,6 +2,11 @@
 // REGION: Photo/Image Extraction
 // ============================================================================
 
+/**
+ * Normalize URL by removing trailing colon if present
+ */
+const normalizeUrl = (url) => url?.endsWith(':') ? url.slice(0, -1) : url;
+
 /**
  * Extract images from a photo document
  * Handles both documents with pictures arrays and direct image objects
@@ -16,9 +21,27 @@ export const extractFromPhotoDoc = (photoDoc, label, docIndex) => {
 };
 
 /**
- * Normalize URL by removing trailing colon if present
+ * Extract and process images from activity data
+ * Processes group photos and activity photos (start, during, end) into a flat array
+ * 
+ * @param {Object} activityData - Activity data object containing photo arrays
+ * @returns {Array} - Flat array of image objects with src and alt properties
  */
-const normalizeUrl = (url) => url?.endsWith(':') ? url.slice(0, -1) : url;
+export const getActivityImages = (activityData) => {
+    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))
+                : []
+        );
+};
 
 // ============================================================================
 // REGION: Gender Distribution
@@ -95,4 +118,65 @@ export const getGenderTooltipChildren = (item, isEmpty, genderDistributionData,
             },
         ],
     });
+};
+
+// ============================================================================
+// REGION: Activity Indicators
+// ============================================================================
+
+/**
+ * Maps activityData value to indicator type
+ * "yes" or true → "compliant"
+ * "no" or false → "notCompliant"
+ * null or undefined → "empty"
+ */
+export const getIndicatorType = (value) => {
+    if (value === "yes" || value === true) return "compliant";
+    if (value === "no" || value === false) return "notCompliant";
+    if (value === null || value === undefined) return "empty";
+    return "empty"; // default fallback
+};
+
+/**
+ * Special case: Children presence indicator configuration
+ * Children presence is compliant if answered 'no', not compliant if answered 'yes'
+ * Custom icons: "no" (compliant) → X icon with green badge, "yes" (notCompliant) → Check icon with red badge
+ * 
+ * @param {string|boolean|null} value - The presenceOfChildren value from activityData
+ * @returns {Object} - Configuration object with type and optional statusIcon
+ */
+export const getChildrenPresenceConfig = (value) => {
+    if (value === "no" || value === false) {
+        return { type: "compliant", statusIcon: "Close" }; // X icon with green badge
+    }
+    if (value === "yes" || value === true) {
+        return { type: "notCompliant", statusIcon: "Check" }; // Check icon with red badge
+    }
+    return { type: "empty" }; // empty state
+};
+
+/**
+ * Get activity indicators configuration from activityData
+ * Maps activityData fields to indicator config objects with icon, label, type, and optional statusIcon
+ * 
+ * @param {Object} activityData - Activity data object
+ * @param {Function} t - Translation function
+ * @returns {Array} - Array of indicator config objects
+ */
+export const getActivityIndicatorsConfig = (activityData, t) => {
+    const childrenPresenceConfig = getChildrenPresenceConfig(activityData?.presenceOfChildren);
+    
+    return [
+        { icon: "Aid", label: t("Aid kit availability"), type: getIndicatorType(activityData?.aidKitAccessible) },
+        { icon: "MineOperators", label: t("H&S training delivery"), type: getIndicatorType(activityData?.hsTrainingConfirmation) },
+        { icon: "Users", label: t("Workers safe pairing"), type: getIndicatorType(activityData?.duosFormed) },
+        { 
+            icon: "Bear", 
+            label: t("Children presence"), 
+            type: childrenPresenceConfig.type,
+            ...(childrenPresenceConfig.statusIcon && { statusIcon: childrenPresenceConfig.statusIcon })
+        },
+        { icon: "Security", label: t("Security presence"), type: getIndicatorType(activityData?.focalPointPresent) },
+        { icon: "UserCircle", label: t("Relay presence"), type: getIndicatorType(activityData?.relayPresent) },
+    ];
 };

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

@@ -1,29 +1,14 @@
 import { useMemo, useCallback } from 'react';
-import { DashboardLayout, Header, ImageCarousel, KeyIndicators, MineSiteMap, Widget, PieChart } from '../../../../../../src/index.js'
+import { DashboardLayout, Header, ImageCarousel, KeyIndicators, MineSiteMap, Widget, PieChart, ActivityIndicators } from '../../../../../../src/index.js'
 import { getKeyIndicatorsRowConfig } from './config';
-import { extractFromPhotoDoc, getGenderDistributionData, isGenderDistributionEmpty, calculateGenderPieData, getGenderTooltipChildren } from './helper';
+import { getActivityImages, getGenderDistributionData, isGenderDistributionEmpty, calculateGenderPieData, getGenderTooltipChildren, getActivityIndicatorsConfig } 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 images = useMemo(() => getActivityImages(activityData), [activityData]);
     const genderDistributionData = useMemo(() => getGenderDistributionData(activityData), [activityData]);
     const isEmpty = useMemo(() => isGenderDistributionEmpty(genderDistributionData), [genderDistributionData]);
     const pieData = useMemo(() => calculateGenderPieData(genderDistributionData), [genderDistributionData]);
@@ -32,6 +17,13 @@ const RestorationActivitySummary = ({ activityData, supportText, onDownload, dow
         (item) => getGenderTooltipChildren(item, isEmpty, genderDistributionData, t, renderTooltipJsx),
         [t, isEmpty, genderDistributionData],
     );
+   
+    // Activity Indicators Config - mapped from activityData
+    const activityIndicatorsConfig = useMemo(() => 
+        getActivityIndicatorsConfig(activityData, t),
+        [activityData, t]
+    );
+
     return (
         <DashboardLayout
             header={
@@ -54,7 +46,7 @@ const RestorationActivitySummary = ({ activityData, supportText, onDownload, dow
             <section>
                 <Widget
                     title={t("Activity Location")}
-                    className="no-px no-pb-body"
+                    className="no-px no-pt-body  no-p-body no-pb-body"
                     style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
                 >
                     <div style={{ flex: 1, minHeight: 0 }}>
@@ -135,6 +127,15 @@ const RestorationActivitySummary = ({ activityData, supportText, onDownload, dow
                 </Widget>
             </section>
 
+            <section>
+                <ActivityIndicators 
+                    config={activityIndicatorsConfig}
+                    loading={loading}
+                    title={t("Activity Indicators")}
+                    className="small-content"
+                />
+            </section>
+
             <section>
                 <div style={{ maxWidth: "70%", width: "calc(100% - 405px)" }}>
                     <ImageCarousel