datastake-daf 0.6.786 → 0.6.788

package/dist/style/datastake/mapbox-gl.css

@@ -0,0 +1,330 @@
+/* Isolated Mapbox GL CSS - Scoped to prevent Leaflet conflicts */
+
+/* Mapbox GL Core Styles - Scoped with .mapbox-gl-scope */
+.mapbox-gl-scope .mapboxgl-map {
+  font: 12px/20px Helvetica Neue, Arial, Helvetica, sans-serif;
+  overflow: hidden;
+  position: relative;
+  -webkit-tap-highlight-color: rgb(0 0 0/0);
+}
+
+.mapbox-gl-scope .mapboxgl-canvas {
+  left: 0;
+  position: absolute;
+  top: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-map:-webkit-full-screen {
+  height: 100%;
+  width: 100%;
+}
+
+.mapbox-gl-scope .mapboxgl-canary {
+  background-color: salmon;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-interactive,
+.mapbox-gl-scope .mapboxgl-ctrl-group button.mapboxgl-ctrl-compass {
+  cursor: grab;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-track-pointer {
+  cursor: pointer;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-interactive:active,
+.mapbox-gl-scope .mapboxgl-ctrl-group button.mapboxgl-ctrl-compass:active {
+  cursor: grabbing;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate,
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate .mapboxgl-canvas {
+  touch-action: pan-x pan-y;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-drag-pan,
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-drag-pan .mapboxgl-canvas {
+  touch-action: pinch-zoom;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas {
+  touch-action: none;
+}
+
+/* Control positioning */
+.mapbox-gl-scope .mapboxgl-ctrl-bottom,
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-left,
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-right,
+.mapbox-gl-scope .mapboxgl-ctrl-left,
+.mapbox-gl-scope .mapboxgl-ctrl-right,
+.mapbox-gl-scope .mapboxgl-ctrl-top,
+.mapbox-gl-scope .mapboxgl-ctrl-top-left,
+.mapbox-gl-scope .mapboxgl-ctrl-top-right {
+  pointer-events: none;
+  position: absolute;
+  z-index: 2;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top-left {
+  left: 0;
+  top: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top {
+  left: 50%;
+  top: 0;
+  transform: translateX(-50%);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top-right {
+  right: 0;
+  top: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-right {
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-right {
+  bottom: 0;
+  right: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-left {
+  bottom: 0;
+  left: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-left {
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl {
+  clear: both;
+  pointer-events: auto;
+  transform: translate(0);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top-left .mapboxgl-ctrl {
+  float: left;
+  margin: 10px 0 0 10px;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top .mapboxgl-ctrl {
+  float: left;
+  margin: 10px 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top-right .mapboxgl-ctrl {
+  float: right;
+  margin: 10px 10px 0 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl,
+.mapbox-gl-scope .mapboxgl-ctrl-right .mapboxgl-ctrl {
+  float: right;
+  margin: 0 10px 10px 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom .mapboxgl-ctrl {
+  float: left;
+  margin: 10px 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl,
+.mapbox-gl-scope .mapboxgl-ctrl-left .mapboxgl-ctrl {
+  float: left;
+  margin: 0 0 10px 10px;
+}
+
+/* Control group styling */
+.mapbox-gl-scope .mapboxgl-ctrl-group {
+  background: #fff;
+  border-radius: 4px;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group:not(:empty) {
+  box-shadow: 0 0 0 2px #0000001a;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button {
+  background-color: initial;
+  border: 0;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: block;
+  height: 29px;
+  outline: none;
+  overflow: hidden;
+  padding: 0;
+  width: 29px;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button+button {
+  border-top: 1px solid #ddd;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl button .mapboxgl-ctrl-icon {
+  background-position: 50%;
+  background-repeat: no-repeat;
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-attrib-button:focus,
+.mapbox-gl-scope .mapboxgl-ctrl-group button:focus {
+  box-shadow: 0 0 2px 2px #0096ff;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl button:disabled {
+  cursor: not-allowed;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl button:disabled .mapboxgl-ctrl-icon {
+  opacity: .25;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button:first-child {
+  border-radius: 4px 4px 0 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button:last-child {
+  border-radius: 0 0 4px 4px;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button:only-child {
+  border-radius: inherit;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl button:not(:disabled):hover {
+  background-color: #0000000d;
+}
+
+/* Marker styles */
+.mapbox-gl-scope .mapboxgl-marker {
+  position: absolute;
+  z-index: 1;
+}
+
+.mapbox-gl-scope .mapboxgl-marker svg {
+  display: block;
+}
+
+/* Popup styles */
+.mapbox-gl-scope .mapboxgl-popup {
+  position: absolute;
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-content-wrapper {
+  padding: 1px;
+  text-align: left;
+  border-radius: 12px;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-content {
+  margin: 13px 24px 13px 20px;
+  line-height: 1.3;
+  font-size: 13px;
+  min-height: 1px;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-content p {
+  margin: 17px 0;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-tip-container {
+  width: 40px;
+  height: 20px;
+  position: absolute;
+  left: 50%;
+  margin-top: -1px;
+  margin-left: -20px;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-tip {
+  width: 17px;
+  height: 17px;
+  padding: 1px;
+  margin: -10px auto 0;
+  pointer-events: auto;
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+.mapbox-gl-scope .mapboxgl-popup-content-wrapper,
+.mapbox-gl-scope .mapboxgl-popup-tip {
+  background: white;
+  color: #333;
+  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
+}
+
+.mapbox-gl-scope .mapboxgl-popup-close-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  border: none;
+  text-align: center;
+  width: 24px;
+  height: 24px;
+  font: 16px/24px Tahoma, Verdana, sans-serif;
+  color: #757575;
+  text-decoration: none;
+  background: transparent;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-close-button:hover,
+.mapbox-gl-scope .mapboxgl-popup-close-button:focus {
+  color: #585858;
+}
+
+/* Attribution */
+.mapbox-gl-scope .mapboxgl-ctrl-attribution {
+  background: #fff;
+  background: rgba(255, 255, 255, 0.8);
+  margin: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-attribution,
+.mapbox-gl-scope .mapboxgl-ctrl-scale-line {
+  padding: 0 5px;
+  color: #333;
+  line-height: 1.4;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-attribution a {
+  text-decoration: none;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-attribution a:hover,
+.mapbox-gl-scope .mapboxgl-ctrl-attribution a:focus {
+  text-decoration: underline;
+}
+
+/* Hide attribution by default */
+.mapbox-gl-scope .mapboxgl-ctrl-attribution {
+  display: none !important;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-logo {
+  display: none !important;
+}

package/package.json

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

package/src/@daf/core/components/Dashboard/Widget/ActivityIndicators/ActivityIndicators.stories.js

@@ -250,3 +250,27 @@ export const NoMinWidth = {
 		);
 	},
 };
+
+export const SingleColumn = {
+	name: "Single Column Layout",
+	args: {
+		className: "single-column",
+	},
+	render: (args) => {
+		const config = [
+			{ icon: "Package", label: "Aid kit availability", type: "compliant" },
+			{ icon: "SchoolHat", label: "H&S training delivery", type: "compliant" },
+			{ icon: "UsersCheck", label: "Workers safe pairing", type: "notCompliant" },
+			{ icon: "User", label: "Children presence", type: "compliant" },
+			{ icon: "Lock", label: "Security presence", type: "empty" },
+			{ icon: "Refresh05", label: "Relay presence", type: "compliant" },
+		];
+		
+		return (
+			<ActivityIndicators
+				{...args}
+				config={config}
+			/>
+		);
+	},
+};

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

@@ -27,6 +27,7 @@ import styled from "styled-components";
  * @param {ReactNode} children - Additional content to render
  * @param {boolean} noTitle - Hide the widget title
  * @param {string} filterMode - Filter indicators by type: "all" | "compliant" | "notCompliant" | "empty"
+ * @param {string} className - Additional CSS classes. Use "single-column" to force single-column layout
  */
 export default function ActivityIndicatorsWidget({
 	t = (s) => s,

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

@@ -99,6 +99,40 @@ const Style = styled.div`
 			}
 		}
 	}
+
+	&.single-column {
+		grid-template-columns: 1fr;
+
+		.indicator-item {
+			/* Remove the 2-column specific separators first */
+			&:nth-child(1),
+			&:nth-child(2),
+			&:nth-child(3),
+			&:nth-child(4) {
+				&::after {
+					display: none !important;
+				}
+			}
+
+			/* On single column, all items except last get separator */
+			&:not(:last-child) {
+				&::after {
+					content: '' !important;
+					position: absolute;
+					bottom: 0;
+					left: var(--size-lg);
+					right: var(--size-lg);
+					height: 1px;
+					background-color: var(--border-color, #E5E7EB);
+					display: block !important;
+				}
+			}
+			
+			&:last-child::after {
+				display: none !important;
+			}
+		}
+	}
 `;
 
 export const NoMinWidth = styled.div`

package/src/@daf/core/components/Dashboard/Widget/KeyIndicators/KeyIndicators.stories.js

@@ -120,3 +120,42 @@ export const NoMinWidth = {
 		],
 	},
 };
+
+export const SiteConditions = {
+	name: "SiteConditions",
+	args: {
+		title: "Site Conditions",
+		className: "small-content",
+		config: [
+			{
+				label: "Season",
+				icon: "Tree",
+				render: () => <div>Rainy</div>
+			},
+			{
+				label: "Weather conditions",
+				icon: "Globe",
+				render: () => <div>Cloudy</div>
+			},
+			{
+				label: "Tide level",
+				icon: "WaterDrop",
+				render: () => <div>Medium</div>
+			},
+			{
+				label: "Disturbances",
+				icon: "Lightning",
+				render: () => <div>None</div>
+			},
+		],
+	},
+	render: (args) => {
+		return (
+			<DashboardLayout>
+				<section>
+					<KeyIndicators {...args} />
+				</section>
+			</DashboardLayout>
+		);
+	},
+};

package/src/@daf/core/components/Dashboard/Widget/KeyIndicators/LabelWithIcon.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CustomIcon from '../../../Icon/CustomIcon.jsx';
+
+const LabelWithIcon = ({ t, name, icon, iconColor = "#028788", iconWidth = 16, iconHeight = 16 }) => {
+  // name is expected to be already translated (string) or a translation key
+  // If it's a string that looks like a translation key (contains '::'), translate it
+  // Otherwise, use it as-is (already translated)
+  const displayText = (typeof name === 'string' && name.includes('::') && t && typeof t === 'function')
+    ? t(name)
+    : name;
+  
+  return (
+    <div className="flex items-center" style={{ gap: 8 }}>
+      {icon && <CustomIcon name={icon} color={iconColor} width={iconWidth} height={iconHeight} />}
+      <span style={{
+        fontSize: '14px',
+        fontWeight: 500,
+        lineHeight: '26px',
+        letterSpacing: '0%',
+        color: 'var(--base-gray-70)',
+        fontFamily: 'SF UI Display, -apple-system, BlinkMacSystemFont, sans-serif'
+      }}>{displayText}</span>
+    </div>
+  );
+};
+
+LabelWithIcon.propTypes = {
+  t: PropTypes.func,
+  name: PropTypes.string.isRequired,
+  icon: PropTypes.string,
+  iconColor: PropTypes.string,
+  iconWidth: PropTypes.number,
+  iconHeight: PropTypes.number,
+};
+
+export default LabelWithIcon;
+

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

@@ -2,6 +2,7 @@ import Style, { NoMinWidth } from "./style";
 import Widget from "../index.jsx";
 import { formatClassname } from "../../../../../../helpers/ClassesHelper";
 import { Tooltip } from "antd";
+import LabelWithIcon from "./LabelWithIcon.jsx";
 
 export default function KeyIndicatorsWidget({
 	t = (s) => s,
@@ -25,8 +26,8 @@ export default function KeyIndicatorsWidget({
 			{children}
 			<Style className={formatClassname(["flex", className])}>
 				{config.map((c, i) => (
-					<div className="row-item" key={`key-indicators-${i}`}>
-						<Label label={c.label} withTooltip={withTooltip} />
+					<div className={`row-item ${c.icon ? 'row-item-with-icon' : ''}`} key={`key-indicators-${i}`}>
+						<Label label={c.label} icon={c.icon} withTooltip={withTooltip} t={t} />
 						<div className="flex">{c.render()}</div>
 					</div>
 				))}
@@ -40,7 +41,19 @@ export default function KeyIndicatorsWidget({
 	return component;
 }
 
-function Label({ label, withTooltip }) {
+function Label({ label, icon, withTooltip, t }) {
+	if (icon) {
+		const labelContent = <LabelWithIcon t={t} name={label} icon={icon} />;
+		if (withTooltip) {
+			return (
+				<Tooltip title={label} placement="topLeft">
+					<h4>{labelContent}</h4>
+				</Tooltip>
+			);
+		}
+		return <h4>{labelContent}</h4>;
+	}
+	
 	if (withTooltip) {
 		return (
 			<Tooltip title={label} placement="topLeft">

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

@@ -59,12 +59,45 @@ const Style = styled.div`
 				margin-top: 14px;
 			}
 		}
+
+		&.row-item-with-icon {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			gap: 8px;
+
+			h4 {
+				margin-bottom: 0;
+				flex: 0 0 auto;
+			}
+
+			.flex {
+				flex: 0 0 auto;
+				display: flex;
+				align-items: center;
+				font-size: 16px;
+				font-weight: 500;
+				line-height: 38px;
+				letter-spacing: 0;
+				color: var(--base-gray-90);
+				font-family: 'SF UI Display', -apple-system, BlinkMacSystemFont, sans-serif;
+			}
+		}
 	}
 
 	&.small-content {
 		span {
 			font-size: 16px;
 		}
+
+		.row-item-with-icon {
+			.flex {
+				font-size: 16px;
+				line-height: 38px;
+				font-weight: 500;
+				color: var(--base-gray-90);
+			}
+		}
 	}
 
 	.ant-tag {

package/src/@daf/pages/Summary/Activities/Monitoring/components/ActivityImagery/index.jsx

@@ -0,0 +1,29 @@
+import React, { useMemo } from 'react';
+import { ImageCarousel } from '../../../../../../../../src/index.js';
+import { getActivityImages } from '../../helper';
+import { useResizeContext } from '../../../../../../../../src/context';
+
+const ActivityImagery = ({ 
+    activityData, 
+    loading = false, 
+    t = (s) => s 
+}) => {
+    const { isCollapsed, isNestedSidebarCollapsed } = useResizeContext();
+    const images = useMemo(() => getActivityImages(activityData), [activityData]);
+
+    return (
+        <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>
+    );
+};
+
+export default ActivityImagery;
+