@agilemotion/oui-react-js 1.8.27 → 1.8.29

package/dist/ApplicationManager.js

@@ -645,14 +645,19 @@ class ApplicationManager {
             objValue = null;
           }
           if (_this2.isExpression(objValue)) {
-            let scriptValue = _DynamicJS.default.executeScript(`resolveParam_${Math.random().toString().replace('.', '_')}`, objValue, null, null, eventData);
-            if (typeof scriptValue === 'undefined') {
-              scriptValue = null;
-            }
-            let objKey = key === 'valueExpression' ? 'value' : key;
-            updated[objKey] = scriptValue !== null && scriptValue.instanceType === 'TypedValue' ? scriptValue.value : scriptValue;
-            if (typeof updated[objKey] === 'undefined') {
-              delete updated.type;
+            try {
+              let scriptValue = _DynamicJS.default.executeScript(`resolveParam_${Math.random().toString().replace('.', '_')}`, objValue, null, null, eventData);
+              if (typeof scriptValue === 'undefined') {
+                scriptValue = null;
+              }
+              let objKey = key === 'valueExpression' ? 'value' : key;
+              updated[objKey] = scriptValue !== null && scriptValue.instanceType === 'TypedValue' ? scriptValue.value : scriptValue;
+              if (typeof updated[objKey] === 'undefined') {
+                delete updated.type;
+              }
+            } catch (e) {
+              console.error("Error processing parameter expression : " + objValue);
+              throw e;
             }
           } else {
             updated[key] = objValue;

package/dist/DateUtils.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.makeDateReplacer = makeDateReplacer;
+// Build "YYYY-MM-DDTHH:mm:ss.SSS+HH:MM" for a given time zone
+function zonedISOString(date) {
+  let timeZone = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'Africa/Johannesburg';
+  // 1) Get wall-clock parts in the target zone
+  const dtf = new Intl.DateTimeFormat('en-CA', {
+    timeZone,
+    hour12: false,
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit'
+  });
+  const parts = Object.fromEntries(dtf.formatToParts(date).map(p => [p.type, p.value]));
+  const ms = String(date.getMilliseconds()).padStart(3, '0');
+
+  // 2) Compute numeric offset (+/- minutes) for that zone at this instant
+  //    (works across DST if your zone observes it)
+  const asUTC = Date.UTC(Number(parts.year), Number(parts.month) - 1, Number(parts.day), Number(parts.hour), Number(parts.minute), Number(parts.second), date.getMilliseconds());
+  const offsetMinutes = Math.round((asUTC - date.getTime()) / 60000); // e.g. +120 for SAST
+  const sign = offsetMinutes >= 0 ? '+' : '-';
+  const abs = Math.abs(offsetMinutes);
+  const offHH = String(Math.trunc(abs / 60)).padStart(2, '0');
+  const offMM = String(abs % 60).padStart(2, '0');
+  const offset = `${sign}${offHH}:${offMM}`;
+  return `${parts.year}-${parts.month}-${parts.day}T${parts.hour}:${parts.minute}:${parts.second}.${ms}${offset}`;
+}
+
+// Replacer: converts Date instances anywhere in the object graph
+function makeDateReplacer() {
+  let {
+    timeZone = 'Africa/Johannesburg',
+    mode = 'zoned-iso'
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return function replacer(_key, value) {
+    if (value instanceof Date) {
+      if (mode === 'epoch-ms') return value.getTime(); // 1732575600000
+      if (mode === 'utc-iso') return value.toISOString(); // 2025-11-25T22:00:00.000Z
+      return zonedISOString(value, timeZone); // default: SAST ISO with +02:00
+    }
+    return value;
+  };
+}
+
+// Usage
+const obj = {
+  data: {
+    person: {
+      dob: new Date('2025-11-25T22:00:00.000Z')
+    },
+    when: new Date(),
+    // now
+    list: [1, new Date('2025-06-01T10:00:00Z')]
+  }
+};
+
+// Serialize with SAST (UTC+02:00)
+const jsonSAST = JSON.stringify(obj, makeDateReplacer({
+  timeZone: 'Africa/Johannesburg'
+}));
+console.log(jsonSAST);
+
+// If you prefer epoch millis everywhere (more portable)
+const jsonEpoch = JSON.stringify(obj, makeDateReplacer({
+  mode: 'epoch-ms'
+}));
+
+// If you want to keep UTC ISO but be explicit (baseline behavior)
+const jsonUTC = JSON.stringify(obj, makeDateReplacer({
+  mode: 'utc-iso'
+}));

package/dist/DynamicJS.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.TEMPLATE_REGEX = void 0;
 var _ApplicationManager = _interopRequireWildcard(require("./ApplicationManager"));
 var _Utils = _interopRequireDefault(require("./Utils"));
+var _DateUtils = require("./DateUtils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -40,6 +41,9 @@ class DynamicJS {
     return _Utils.default.isNull(value) || value.toString().trim().length === 0;
   }
   evaluateExpression = expression => {
+    if (typeof expression !== 'string') {
+      return expression;
+    }
     return _ApplicationManager.default.resolveExpressionValue(expression);
   };
   parseScript = (script, componentId, isScriptlet) => {
@@ -88,6 +92,7 @@ class DynamicJS {
         eventParam.data = event.data;
       }
       try {
+        // NB : The javascript serializer uses UCT for dates and it is 2 hours behind. TODO : use  DateUtils.makeDateReplacer
         let func = new Function(parsedScript.replace(/\$event/g, JSON.stringify(eventParam)));
         if (!_Utils.default.isNull(name)) {
           DynamicJS.prototype[name] = func;

package/dist/RestService.js

@@ -43,7 +43,7 @@ class RestService {
         let requestBodyParamFound = false;
         for (const parameter of service.parameters) {
           let parameterValue = _ApplicationManager.default.resolveParameterValue(parameter, request.event ? request.event.data : null);
-          if (!_Utils.default.isNull(parameter.validator) && !_Utils.default.evaluateBooleanExpression(parameter.validator.nullable, parameter.name) && this.isParamValueNull(parameterValue)) {
+          if (!_Utils.default.isNull(parameter.validator) && (parameter.validator.nullable && !_Utils.default.evaluateBooleanExpression(parameter.validator.nullable, parameter.name) || _Utils.default.evaluateBooleanExpression(parameter.validator.required && _Utils.default.evaluateBooleanExpression(parameter.validator.required, parameter.name))) && this.isParamValueNull(parameterValue)) {
             reject({
               errorType: 'INVALID_PARAMETER',
               parameter
@@ -188,8 +188,7 @@ class RestService {
           if (_Utils.default.isNull(parameter.type)) {
             parameter.type = 'String';
           }
-          if (!_Utils.default.isNull(parameterConfig.validator) && _Utils.default.evaluateBooleanExpression(parameterConfig.validator.nullable, parameterConfig.name) === false && this.isParamValueNull(parameter)) {
-            console.error('INVALID PARAMETER : ', parameter);
+          if (!_Utils.default.isNull(parameter.validator) && (parameter.validator.nullable && !_Utils.default.evaluateBooleanExpression(parameter.validator.nullable, parameter.name) || _Utils.default.evaluateBooleanExpression(parameter.validator.required && _Utils.default.evaluateBooleanExpression(parameter.validator.required, parameter.name))) && this.isParamValueNull(parameter.value)) {
             reject({
               errorType: 'INVALID_PARAMETER',
               parameter

package/dist/Utils.js

@@ -13,7 +13,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const colors = ['#F44336', '#e91e63', '#9c27b0', '#673ab7', '#ff9800', '#ff5722', '#795548', '#607d8b', '#3f51b5', '#2196F3', '#00bcd4', '#009688', '#2196F3', '#32c787', '#00BCD4', '#ff5652', '#ffc107', '#ff85af', '#FF9800', '#39bbb0', '#4CAF50', '#ffeb3b', '#ffc107'];
 class Utils {
   constructor() {}
-  static SYSTEM_ERROR_MESSAGE = "A system error has accured. Please contact your system administrator";
+  static SYSTEM_ERROR_MESSAGE = "A system error has occurred. Please contact your system administrator";
   static isNull(value) {
     return value === null || typeof value === 'undefined';
   }
@@ -147,7 +147,7 @@ class Utils {
     return JSON.stringify(request);
   }
   static getFieldColspan = field => {
-    return !Utils.isNull(field.attributes) && !Utils.isNull(field.attributes['colspan']) ? parseFloat(field.attributes['colspan']) : 1;
+    return !Utils.isNull(field.attributes) && !Utils.isNull(field.attributes['colspan']) ? parseInt(typeof field.attributes.colspan === 'string' ? _DynamicJS.default.executeScript("__colspan_" + field.id, field.attributes.colspan) : field.attributes.colspan) : 1;
   };
   static createRow = () => {
     let row = {};
@@ -353,7 +353,7 @@ class Utils {
   };
   static publishSystemErrorMessage = function (viewId) {
     let component = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    Utils.publishErrorMessage('A system error has accured. Please try again later', viewId, component);
+    Utils.publishErrorMessage('A system error has occurred. Please try again later', viewId, component);
   };
   static base64ToArrayBuffer = base64 => {
     const binaryString = window.atob(base64);

package/dist/components/DataGrid.js

@@ -276,6 +276,9 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
         if (!_Utils.default.isNull(props.config.visible)) {
           setVisible(_Utils.default.evaluateBooleanExpression(props.config.visible, props.config.id));
         }
+      },
+      set visible(visible) {
+        setVisible(visible);
       }
     };
   };
@@ -917,7 +920,8 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
       dataBinding: !_Utils.default.isNull(column.dataBinding) ? column.dataBinding : column.id,
       row: row,
       contentType: column.fieldType || column.editor?.fieldType,
-      cellFormatter: column.cellFormatter
+      cellFormatter: column.cellFormatter,
+      criteria: criteria
     }))));
   })))), _Utils.default.isNull(props.pagination) || props.pagination === true ? /*#__PURE__*/_react.default.createElement(_TablePagination.default, {
     rowsPerPageOptions: rowsPerPageOptions,

package/dist/components/DataGridColumn.js

@@ -11,6 +11,8 @@ var _reactSuperResponsiveTable = require("react-super-responsive-table");
 var _TableSortLabel = _interopRequireDefault(require("@mui/material/TableSortLabel"));
 require("./DataGrid.css");
 var _styles = require("@mui/styles");
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const useStyles = (0, _styles.makeStyles)(theme => ({
   tableHeaderCell: {
@@ -148,11 +150,30 @@ const DataGridColumn = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.defa
     },
     onMouseDown: e => handleResizeStart(e, props.config.id)
   }), /*#__PURE__*/_react.default.createElement(_TableSortLabel.default, {
-    active: config.attributes['sortable'] === true,
-    direction: 'desc',
+    active: false,
+    direction: "desc",
     onClick: props.createSortHandler(config.id)
-  }, label + postfix, 'id' === config.id ? /*#__PURE__*/_react.default.createElement("span", {
+    // keep the sort icon from squashing the text
+    ,
+    sx: {
+      '& .MuiTableSortLabel-icon': {
+        flexShrink: 0
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    title: label + postfix
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    component: "span",
+    sx: {
+      display: 'inline-block',
+      maxWidth: '100%',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      verticalAlign: 'bottom'
+    }
+  }, label + postfix)), 'id' === config.id ? /*#__PURE__*/_react.default.createElement("span", {
     className: classes.visuallyHidden
-  }, 'sorted descending') : null));
+  }, "sorted descending") : null));
 }));
 var _default = exports.default = DataGridColumn;

package/dist/components/HtmlPanel.js

@@ -83,9 +83,11 @@ const HtmlPanel = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.f
       get id() {
         return props.config.id;
       },
-      loadData: actionConfig => {
+      loadData: (actionConfig, event) => {
         if (actionConfig && actionConfig.value) {
-          let data = _ApplicationManager.default.resolveExpressionValue(actionConfig.value);
+          console.log("\n\n\n\n\n HTML PANEL : ", actionConfig.value);
+          let data = _ApplicationManager.default.resolveExpressionValue(actionConfig.value, event?.data);
+          console.log("DATA : ", data);
           let templateScript = Handlebars.compile(template);
           setContent(templateScript(data));
         }

package/dist/components/Icon.js

@@ -26,6 +26,7 @@ var _Notifications = _interopRequireDefault(require("@mui/icons-material/Notific
 var _Person = _interopRequireDefault(require("@mui/icons-material/Person"));
 var _Refresh = _interopRequireDefault(require("@mui/icons-material/Refresh"));
 var _Folder = _interopRequireDefault(require("@mui/icons-material/Folder"));
+var _FolderOpen = _interopRequireDefault(require("@mui/icons-material/FolderOpen"));
 var _AttachFile = _interopRequireDefault(require("@mui/icons-material/AttachFile"));
 var _CalendarToday = _interopRequireDefault(require("@mui/icons-material/CalendarToday"));
 var _react = _interopRequireWildcard(require("react"));
@@ -166,6 +167,8 @@ class Icon extends _react.Component {
       });
     } else if (this.props.id === 'FOLDER') {
       return /*#__PURE__*/_react.default.createElement(_Folder.default, null);
+    } else if (this.props.id === 'FOLDER_OPEN') {
+      return /*#__PURE__*/_react.default.createElement(_FolderOpen.default, null);
     } else if (this.props.id === 'CALENDAR') {
       return /*#__PURE__*/_react.default.createElement(_CalendarToday.default, null);
     } else if (this.props.id === 'SIGN') {

package/dist/components/PDFViewer.js

@@ -4,10 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactPdf = require("react-pdf");
 var _Utils = _interopRequireDefault(require("../Utils"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 _reactPdf.pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${_reactPdf.pdfjs.version}/pdf.worker.js`;
 const PDFViewer = props => {
   const [pageNumber, setPageNumber] = _react.default.useState(1);
@@ -21,6 +23,9 @@ const PDFViewer = props => {
       props.onDocumentLoadSuccess(numPages);
     }
   };
+  (0, _react.useEffect)(() => {
+    setPageNumber(1);
+  }, [props.file]);
   const changePage = offset => {
     setPageNumber(pageNumber + offset);
   };

package/dist/components/TabPanel.js

@@ -110,6 +110,12 @@ const TabPanel = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.fo
         }
         return children;
       },
+      set value(value) {
+        setTabValue(value);
+      },
+      get value() {
+        return tabValue;
+      },
       setPageHasError: (pageId, hasError) => {
         setErrors({
           ...errors,

package/dist/components/TableCellContent.js

@@ -16,6 +16,7 @@ const TableCellContent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.de
   const [refresher, setRefresher] = _react.default.useState(true);
   const [editor, setEditor] = _react.default.useState(null);
   const editorValue = _react.default.useRef(null);
+  const escapeRegex = s => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
   const formatter = new Intl.NumberFormat("en-ZA", {
     style: "currency",
     currency: "ZAR",
@@ -97,6 +98,45 @@ const TableCellContent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.de
     const formatted = `${String(date.getDate()).padStart(2, '0')}/` + `${String(date.getMonth() + 1).padStart(2, '0')}/` + `${date.getFullYear()}`;
     return formatted;
   };
+
+  // Build flat, deduped list of search terms from criteria.parameters
+  const buildSearchTerms = parameters => {
+    const set = new Set();
+    for (const p of parameters || []) {
+      if (p?.value && typeof p.value === 'string') {
+        for (const term of p.value.split(/\s+/)) {
+          const t = term.trim();
+          if (t) set.add(t.toLowerCase());
+        }
+      }
+    }
+    return Array.from(set); // lowercase terms
+  };
+  const highlightTokens = (value, terms) => {
+    if (!value || !terms?.length) return value;
+
+    // Combine terms into a single capturing group for split
+    const pattern = `(${terms.map(t => escapeRegex(t)).join('|')})`;
+    const splitRegex = new RegExp(pattern, 'gi');
+    const exactRegex = new RegExp(`^(?:${pattern})$`, 'i'); // to test parts
+
+    const parts = value.split(splitRegex);
+    return parts.map((part, i) => {
+      const isMatch = exactRegex.test(part);
+      return isMatch ? /*#__PURE__*/_react.default.createElement("span", {
+        key: i,
+        style: {
+          backgroundColor: '#ffeb3b',
+          color: '#000',
+          borderRadius: '4px',
+          fontWeight: 'bold',
+          boxShadow: '0 0 3px rgba(0,0,0,0.3)'
+        }
+      }, part) : /*#__PURE__*/_react.default.createElement("span", {
+        key: i
+      }, part);
+    });
+  };
   const getStaticDisplayValue = () => {
     let displayValue;
     let contentValue;
@@ -133,7 +173,12 @@ const TableCellContent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.de
           // TODO : First check if the editor has a display template. If it does, use it to get the display value
           displayValue = contentValue.dataRecordDescription;
         } else {
-          displayValue = contentValue;
+          if (props.criteria && props.criteria.parameters) {
+            const terms = buildSearchTerms(props.criteria.parameters);
+            return highlightTokens(contentValue, terms);
+          } else {
+            return contentValue;
+          }
         }
       }
       if (props.cellFormatter) {

package/dist/components/facialRecognition/FaceRecognitionComponent.js

@@ -0,0 +1,205 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var faceapi = _interopRequireWildcard(require("face-api.js"));
+var _faceApi2 = require("./service/faceApi");
+var _reactRouterDom = require("react-router-dom");
+require("./FacialRecognition.css");
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+var _Utils = _interopRequireDefault(require("../../Utils"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const FaceRecognitionComponent = _ref => {
+  let {
+    mode,
+    processingPath,
+    onComplete
+  } = _ref;
+  const [imageUrl, setImageUrl] = (0, _react.useState)(null);
+  const [boxes, setBoxes] = (0, _react.useState)([]);
+  const [step, setStep] = (0, _react.useState)(1);
+  const [modelsLoaded, setModelsLoaded] = (0, _react.useState)(false);
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const [resultMessage, setResultMessage] = (0, _react.useState)(null);
+  const [resultSuccess, setResultSuccess] = (0, _react.useState)(null);
+  const videoRef = (0, _react.useRef)(null);
+  const streamRef = (0, _react.useRef)(null);
+  const canvasRef = (0, _react.useRef)(null);
+  const navigate = (0, _reactRouterDom.useNavigate)();
+  (0, _react.useEffect)(() => {
+    const loadModels = async () => {
+      await faceapi.nets.ssdMobilenetv1.loadFromUri('/models');
+      await faceapi.nets.faceLandmark68Net.loadFromUri('/models');
+      await faceapi.nets.faceRecognitionNet.loadFromUri('/models');
+      setModelsLoaded(true);
+    };
+    loadModels();
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (step === 2 && videoRef.current) {
+      loadCamera();
+    } else if (step === 3 && streamRef.current) {
+      const stream = streamRef.current;
+      stream?.getTracks().forEach(track => track.stop());
+    }
+  }, [step]);
+  (0, _react.useEffect)(() => {
+    const video = videoRef.current;
+    if (!video || !modelsLoaded || step !== 2) return;
+    const detect = () => detectFace();
+    video.addEventListener('canplay', detect);
+    const interval = setInterval(detect, 200);
+    return () => {
+      video.removeEventListener('canplay', detect);
+      clearInterval(interval);
+    };
+  }, [modelsLoaded, step]);
+  const loadCamera = async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: true
+      });
+      if (videoRef.current) {
+        videoRef.current.srcObject = stream;
+      }
+      streamRef.current = stream;
+    } catch (err) {
+      console.error('Error accessing webcam:', err);
+    }
+  };
+  (0, _react.useEffect)(() => {
+    // 👇 THIS is the cleanup for stopping the webcam
+    return () => {
+      const stream = streamRef.current;
+      stream?.getTracks().forEach(track => track.stop());
+    };
+  }, []);
+  const detectFace = async () => {
+    const video = videoRef.current;
+    const canvas = canvasRef.current;
+    if (!video || !canvas) return;
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    const detections = await faceapi.detectAllFaces(video).withFaceLandmarks().withFaceDescriptors();
+    const resizedDetections = faceapi.resizeResults(detections, {
+      width: video.videoWidth,
+      height: video.videoHeight
+    });
+    setBoxes(resizedDetections.map(d => d.detection.box));
+    const ctx = canvas.getContext('2d');
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    faceapi.draw.drawDetections(canvas, resizedDetections);
+    faceapi.draw.drawFaceLandmarks(canvas, resizedDetections);
+  };
+  const captureImage = async () => {
+    if (loading) return;
+    setLoading(true);
+    const video = videoRef.current;
+    try {
+      const detection = await faceapi.detectSingleFace(video).withFaceLandmarks().withFaceDescriptor();
+      if (!detection) {
+        alert("No face detected.");
+        return;
+      }
+      const box = detection.detection.box;
+      const croppedCanvas = document.createElement('canvas');
+      croppedCanvas.width = box.width;
+      croppedCanvas.height = box.height;
+      const ctx = croppedCanvas.getContext('2d');
+      ctx.drawImage(video, box.x, box.y, box.width, box.height, 0, 0, box.width, box.height);
+      const faceDataUrl = croppedCanvas.toDataURL();
+      const descriptor = detection.descriptor;
+      setImageUrl(faceDataUrl);
+      const response = mode === 'register' ? await (0, _faceApi2.registerFace)(descriptor, faceDataUrl, processingPath) : await (0, _faceApi2.verifyFace)(descriptor, processingPath);
+      if (response.outcome !== 'SUCCESS') {
+        setStep(3);
+        setResultMessage(response.message || `Failed to ${mode} face.`);
+        setResultSuccess(false);
+        onComplete(response);
+        return;
+      }
+      setResultMessage(response.message || `${mode === 'register' ? 'Registered' : 'Verified'} successfully!`);
+      setResultSuccess(true);
+      setStep(3);
+      onComplete(response);
+    } catch (err) {
+      //console.log('API errors:', err);
+      setResultMessage('Verification failed.' || `${mode === 'verify' ? 'Verification' : 'Registeration'} failed!`);
+      setStep(3);
+      //alert('Something went wrong while processing your face. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      alignContent: 'center',
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      maxWidth: '28rem',
+      textAlign: 'center'
+    }
+  }, step < 3 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h2", {
+    className: "text-xl font-bold mb-2"
+  }, mode === 'register' ? "Let's register your face" : "Facial verification"), /*#__PURE__*/_react.default.createElement("p", {
+    className: "text-gray-600 mb-6"
+  }, mode === 'register' ? 'Look into the camera to register your face.' : 'Look into the camera for verification.'), step === 1 && /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: 'contained',
+    size: "large",
+    color: 'primary',
+    onClick: () => setStep(2)
+  }, "Start ", mode === 'register' ? 'Registration' : 'Verification'), step === 2 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      alignContent: 'center',
+      justifyContent: 'center',
+      position: 'relative',
+      aspectRatio: '16 / 9',
+      margin: '1em 0',
+      height: 'auto',
+      borderRadius: '4px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("video", {
+    ref: videoRef,
+    autoPlay: true,
+    muted: true,
+    playsInline: true,
+    style: {
+      width: '100%',
+      height: 'auto'
+    }
+  }), /*#__PURE__*/_react.default.createElement("canvas", {
+    ref: canvasRef,
+    style: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%'
+    },
+    className: "absolute top-0 left-0 w-full h-full"
+  })), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: 'contained',
+    size: "large",
+    color: 'primary',
+    onClick: captureImage,
+    disabled: loading || !videoRef.current
+  }, loading ? 'Processing...' : 'Capture'))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h2", {
+    className: `text-xl font-bold mb-2 ${resultSuccess ? 'text-green-600' : 'text-red-600'}`
+  }, resultSuccess ? mode === 'register' ? "" : "" : "Something went wrong"), /*#__PURE__*/_react.default.createElement("p", {
+    className: `text-xl font-bold mb-2 ${resultSuccess ? 'text-green-600' : 'text-red-600'}`
+  }, resultMessage || `Face ${mode} result.`), imageUrl && /*#__PURE__*/_react.default.createElement("img", {
+    src: imageUrl,
+    alt: "Captured Face",
+    className: "rounded-xl border shadow-lg w-full"
+  }))));
+};
+var _default = exports.default = FaceRecognitionComponent;

package/dist/components/facialRecognition/FacialRecognition.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;