ui-soxo-bootstrap-core 2.6.56 → 2.6.61

package/core/components/landing-api/landing-api.js

@@ -363,6 +363,11 @@ export default function LandingApi({ history, CustomComponents, CustomModels, ap
       dispatch({ type: 'settings', payload: result.result.settings });
     }
 
+    // Role of the logged in user comes along with the menus response (NURA)
+    if (result.result.role) {
+      dispatch({ type: 'role', payload: result.result.role });
+    }
+
     // Reports length
     if (reports.length) {
       reportMenus = [

package/core/lib/Store.js

@@ -73,6 +73,7 @@ const initialState = {
   defaultBranch: {},
   theme: initialTheme(), // Set the initial theme from themes.json
   settings: {},
+  role: {},
 };
 
 /**
@@ -231,6 +232,7 @@ export const GlobalProvider = ({ children, CustomModels,CustomComponents, appSet
     app: app,
     user: state.user,
     settings: state.settings,
+    role: state.role,
     dispatch: dispatch,
     twilio: state.twilio,
     isMobile,
@@ -308,6 +310,10 @@ export const AppReducer = (state, action) => {
     case 'settings':
       return { ...state, settings: action.payload };
 
+    // Role of the logged in user, received along with the menus response
+    case 'role':
+      return { ...state, role: action.payload };
+
     case 'slot':
       return { ...state, user: action.payload };
 

package/core/lib/elements/basic/reference-select/reference-select.js

@@ -42,6 +42,7 @@ function ReferenceSelect({
   allowClear,
   sortKey, // Key for sorting
   sortOrder = 'asc', // default to ascending,
+  dbPtr, // db pointer to load the options from , defaults to the logged in db when not passed
   ...componentProps
 }) {
   let [options, setOptions] = useState([]);
@@ -87,8 +88,11 @@ function ReferenceSelect({
 
     // Case 1: 'nura-base' mode – used for general fetch via config
     if (mode === 'nura-base') {
+      // Point the request to the passed db , else keep the default db_ptr flow
+      const requestConfig = dbPtr ? { ...config, headers: { ...config?.headers, db_ptr: dbPtr } } : { ...config };
+
       // Fetch data from model using config
-      model.get({ ...config }).then((response) => {
+      model.get(requestConfig).then((response) => {
         // Extract result from response or fallback to response directly
         let data = response.result || response;
 

package/core/modules/reporting/components/reporting-dashboard/reporting-table.js

@@ -1,7 +1,7 @@
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useEffect, useMemo, useContext } from 'react';
 import { Table, Skeleton, Input, Modal, message, Pagination } from 'antd';
 import { QrcodeOutlined } from '@ant-design/icons';
-import { ExportReactCSV, getExportData, Card, TableComponent, QrScanner } from './../../../../lib/';
+import { ExportReactCSV, getExportData, Card, TableComponent, QrScanner, GlobalContext, safeJSON } from './../../../../lib/';
 import moment from 'moment-timezone';
 import { CoreScripts } from './../../../../models/';
 import Button from '../../../../lib/elements/basic/button/button';
@@ -93,6 +93,19 @@ export default function ReportingTable({
   const [internalConfig, setInternalConfig] = useState({});
   const [internalPagination, setInternalPagination] = useState({ current: 1, pageSize: 20, total: 0 });
 
+  const { role = {} } = useContext(GlobalContext);
+  // When any of the logged in user's roles has `enableUserFilter: true` in its other details,
+  // reports receive `enableUserFilter: true` so they can restrict rows to the user's own records.
+  // `role` may be a single role object or an array of roles.
+  const roles = Array.isArray(role) ? role : role ? [role] : [];
+  const isUserFilterEnabled = roles.some((r) => {
+    const details = r?.other_details;
+    // Some records store other_details with single quotes, e.g. "{'enableUserFilter':true}"
+    const parsed = safeJSON(details) || (typeof details === 'string' ? safeJSON(details.replace(/'/g, '"')) : null) || {};
+    return parsed.enableUserFilter === true;
+  });
+  const userFilter = isUserFilterEnabled ? { enableUserFilter: true } : {};
+
   // Independent mode is enabled when enough identifiers are present for the
   // table to load its own schema and data instead of relying on parent props.
   const shouldFetchData = !!(requestId || reportId || replacements?.submode || replacements?.mode);
@@ -189,6 +202,7 @@ export default function ReportingTable({
           page: currentPager.current,
           limit: currentPager.pageSize,
           ...(requestPayload?.body ? {} : { mode, submode }),
+          ...userFilter,
         },
       };
       // if (!isNuradesk) {
@@ -199,6 +213,7 @@ export default function ReportingTable({
             ...replacements,
             page: currentPager.current,
             limit: currentPager.pageSize,
+            ...userFilter,
           },
         };
       }

package/core/modules/steps/steps.js

@@ -34,6 +34,8 @@ import './steps.scss';
 const TOUCH_NAV_HIDE_DELAY = 2800;
 const SWIPE_DISTANCE_THRESHOLD = 60;
 const SWIPE_VERTICAL_TOLERANCE = 80;
+const ZOOM_MIN = 1;
+const ZOOM_MAX = 3;
 
 /**
  * First-step CTA labels keyed by normalized process name.
@@ -148,7 +150,11 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
   const [realtimeStatus, setRealtimeStatus] = useState('idle');
   const [isTouchDevice, setIsTouchDevice] = useState(false);
   const [touchNavVisible, setTouchNavVisible] = useState(false);
+  const [zoom, setZoom] = useState(ZOOM_MIN);
 
+  const stageBodyRef = useRef(null);
+  const zoomLayerRef = useRef(null);
+  const pinchRef = useRef(null);
   const narrationUtteranceRef = useRef(null);
   const narrationAudioRef = useRef(null);
   const narrationAudioUrlRef = useRef(null);
@@ -1139,11 +1145,91 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
       return;
     }
 
+    if (isStepFullscreen && event.touches.length >= 2) {
+      // Two fingers = pinch. Cancel any pending swipe so it cannot navigate.
+      touchStartRef.current = null;
+      const stage = stageBodyRef.current;
+      const rect = stage.getBoundingClientRect();
+      const [first, second] = [event.touches[0], event.touches[1]];
+      const midX = (first.clientX + second.clientX) / 2 - rect.left;
+      const midY = (first.clientY + second.clientY) / 2 - rect.top;
+      pinchRef.current = {
+        left: rect.left,
+        top: rect.top,
+        distance: getTouchDistance(first, second),
+        scale: zoom,
+        nextScale: zoom,
+        // Content point under the pinch midpoint, in unscaled coordinates.
+        contentX: (stage.scrollLeft + midX) / zoom,
+        contentY: (stage.scrollTop + midY) / zoom,
+      };
+      // Pinch writes to the DOM directly (no React re-render per frame).
+      stage.style.overflow = 'auto';
+      zoomLayerRef.current.style.willChange = 'transform';
+      return;
+    }
+
+    if (pinchRef.current || (isStepFullscreen && zoom > 1)) {
+      // Zoomed in: horizontal drags scroll the content, not swipe between steps.
+      return;
+    }
+
     const touch = event.touches[0];
     touchStartRef.current = { x: touch.clientX, y: touch.clientY };
     revealTouchNav();
   };
 
+  const getTouchDistance = (first, second) => Math.hypot(first.clientX - second.clientX, first.clientY - second.clientY) || 1;
+
+  /**
+   * onTouchMove for the stage body (full screen pinch-to-zoom).
+   * - Scale follows the finger distance, clamped to ZOOM_MIN..ZOOM_MAX.
+   * - Content is scaled from its top-left; the stage body scrolls natively
+   *   while zoomed, so scroll is set to keep the pinch midpoint anchored.
+   * - Transform and scroll are written straight to the DOM; React state is
+   *   committed once, on touch end, so the heavy step tree is not re-rendered
+   *   on every touchmove.
+   */
+  const handleStageTouchMove = (event) => {
+    const pinch = pinchRef.current;
+    if (!pinch || !isStepFullscreen || event.touches.length < 2) {
+      return;
+    }
+
+    const stage = stageBodyRef.current;
+    const [first, second] = [event.touches[0], event.touches[1]];
+    const midX = (first.clientX + second.clientX) / 2 - pinch.left;
+    const midY = (first.clientY + second.clientY) / 2 - pinch.top;
+    const nextScale = Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, pinch.scale * (getTouchDistance(first, second) / pinch.distance)));
+
+    pinch.nextScale = nextScale;
+    zoomLayerRef.current.style.transform = `scale(${nextScale})`;
+    stage.scrollLeft = pinch.contentX * nextScale - midX;
+    stage.scrollTop = pinch.contentY * nextScale - midY;
+  };
+
+  /** Commits the pinch result to state and hands styling back to React. */
+  const finishPinch = () => {
+    const pinch = pinchRef.current;
+    pinchRef.current = null;
+    if (!pinch) {
+      return;
+    }
+
+    const stage = stageBodyRef.current;
+    const layer = zoomLayerRef.current;
+    // Snap tiny zooms back to 100% so the view never rests at ~1.01.
+    const finalScale = pinch.nextScale < 1.05 ? ZOOM_MIN : pinch.nextScale;
+    stage.style.overflow = '';
+    layer.style.willChange = '';
+    layer.style.transform = finalScale === 1 ? '' : `scale(${finalScale})`;
+    if (finalScale === 1) {
+      stage.scrollLeft = 0;
+      stage.scrollTop = 0;
+    }
+    setZoom(finalScale);
+  };
+
   /**
    * onTouchEnd for the stage body.
    * - Computes the horizontal/vertical delta against the stored touch origin.
@@ -1155,6 +1241,13 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
    *   the user can continue tapping if they prefer.
    */
   const handleStageTouchEnd = (event) => {
+    if (pinchRef.current) {
+      // Pinch ends when a finger lifts; the leftover finger must not trigger a swipe.
+      finishPinch();
+      touchStartRef.current = null;
+      return;
+    }
+
     const start = touchStartRef.current;
     touchStartRef.current = null;
 
@@ -1188,6 +1281,19 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
     }
   };
 
+  /**
+   * Zoom is per step and full-screen only: reset when leaving full screen or
+   * moving to another step so the next view never opens pre-zoomed.
+   */
+  useEffect(() => {
+    pinchRef.current = null;
+    if (stageBodyRef.current) {
+      stageBodyRef.current.scrollLeft = 0;
+      stageBodyRef.current.scrollTop = 0;
+    }
+    setZoom(ZOOM_MIN);
+  }, [isStepFullscreen, activeStep]);
+
   /**
    * Cleanup any pending auto-hide timeout on unmount so the callback cannot
    * fire against a stale component and emit a React warning.
@@ -1446,9 +1552,12 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
                   desktop event trees untouched.
               */}
               <div
-                className={`steps-stage-body${isTouchDevice ? ' is-swipe-enabled' : ''}`}
+                ref={stageBodyRef}
+                className={`steps-stage-body${isTouchDevice ? ' is-swipe-enabled' : ''}${isStepFullscreen && zoom > 1 ? ' is-zoomed' : ''}`}
                 onTouchStart={isTouchDevice ? handleStageTouchStart : undefined}
+                onTouchMove={isTouchDevice ? handleStageTouchMove : undefined}
                 onTouchEnd={isTouchDevice ? handleStageTouchEnd : undefined}
+                onTouchCancel={isTouchDevice ? handleStageTouchEnd : undefined}
               >
                 {/*
                   Floating prev/next arrow buttons.
@@ -1505,14 +1614,24 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
                   </div> */}
 
                   {/* <div className="steps-chat-step-component"> */}
-                    {loading ? (
-                      <div className="steps-chat-loading">
-                        <div className="steps-chat-loading__card">
-                          <Skeleton active title={{ width: '32%' }} paragraph={{ rows: 6, width: ['90%', '82%', '86%', '70%', '78%', '60%'] }} />
+                    {/*
+                      Zoom layer: scaled via transform only in full screen, so
+                      the normal view keeps its untouched layout.
+                    */}
+                    <div
+                      ref={zoomLayerRef}
+                      className="steps-zoom-layer"
+                      style={isStepFullscreen && zoom !== 1 ? { transform: `scale(${zoom})` } : undefined}
+                    >
+                      {loading ? (
+                        <div className="steps-chat-loading">
+                          <div className="steps-chat-loading__card">
+                            <Skeleton active title={{ width: '32%' }} paragraph={{ rows: 6, width: ['90%', '82%', '86%', '70%', '78%', '60%'] }} />
+                          </div>
                         </div>
-                      </div>
-                    ) : null}
-                    {!loading ? renderDynamicStep() : null}
+                      ) : null}
+                      {!loading ? renderDynamicStep() : null}
+                    </div>
                   {/* </div> */}
                 {/* </div> */}
               </div>

package/core/modules/steps/steps.scss

@@ -477,6 +477,23 @@
 .steps-stage-body.is-swipe-enabled {
   touch-action: pan-y;
 }
+/* Zoomed in (full screen): scroll natively in both axes. */
+.steps-stage-body.is-zoomed {
+  overflow: auto;
+}
+.steps-stage-body.is-swipe-enabled.is-zoomed {
+  touch-action: pan-x pan-y;
+}
+
+/* Wrapper for step content; transformed for full-screen zoom. */
+.steps-zoom-layer {
+  flex: 1 1 auto;
+  min-height: 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  transform-origin: 0 0;
+}
 
 /* ── Touch-device floating nav arrows ───────────────────── */
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-soxo-bootstrap-core",
-  "version": "2.6.56",
+  "version": "2.6.61",
   "description": "All the Core Components for you to start",
   "keywords": [
     "all in one"