@argusoft/medplat-app-shell 1.0.5 → 1.0.7

package/src/common/services/util/ReportFieldUtil.jsx

@@ -0,0 +1,398 @@
+import moment from 'moment';
+
+import SafeHtml from '@/common/SafeHtml.jsx';
+// import { showToast } from '@/common/toaster/toaster';
+export const extractFieldValueFromData = (containers, data) => {
+  Object.keys(containers || {}).forEach((key) => {
+    let containerFields = [];
+    if (Array.isArray(containers[key])) {
+      containerFields = containers[key];
+    }
+    containerFields?.forEach((field) => {
+      const value = data[field.fieldName];
+      if (value !== undefined) {
+        if (field.fieldType === 'date') {
+          field.value = moment(value).format('MM/DD/YYYY');
+        } else if (field.fieldType === 'dateNTime') {
+          field.value = moment(value).format('YYYY/MM/DD HH:mm:ss');
+        } else if (field.fieldType === 'onlyMonth') {
+          field.value = moment(value).format('MM/DD/YYYY');
+        } else {
+          field.value = value;
+        }
+      }
+    });
+  });
+  return containers;
+};
+
+export const extractDataFromField = (containers, data) => {
+  data = {};
+
+  Object.keys(containers || {}).forEach((key) => {
+    let containerFields = [];
+    if (Array.isArray(containers[key])) {
+      containerFields = containers[key];
+    }
+
+    containerFields?.forEach((field) => {
+      if (field.value !== undefined && field.value !== null) {
+        if (field.fieldType === 'date' || field.fieldType === 'onlyMonth') {
+          data[field.fieldName] = new Date(moment(field.value).format('MM/DD/YYYY'));
+        } else if (field.fieldType === 'dateNTime') {
+          data[field.fieldName] = new Date(moment(field.value, 'MM/DD/YYYY HH:mm:ss').format('YYYY-MM-DD HH:mm:ss'));
+        } else if (field.fieldType === 'dateRangePicker') {
+          data[field.fieldName] = {
+            startDate: field.value.startDate,
+            endDate: new Date(moment(field.value.endDate, 'MM/DD/YYYY HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')),
+          };
+        } else {
+          data[field.fieldName] = field.value;
+        }
+      }
+    });
+  });
+
+  return data;
+};
+
+function replaceDateFields(temp, fieldsContainer, data) {
+  const dateFields = temp.match(/\$(.*?)\$/g);
+
+  if (!dateFields) return temp;
+
+  dateFields.forEach((field) => {
+    const keyString = field.slice(1, -1); // remove $...$
+
+    let replacingValue = fieldsContainer.find((f) => f.fieldName === keyString);
+
+    // Handle from_ prefix
+    if (!replacingValue) {
+      replacingValue = fieldsContainer.find((f) => 'from_' + f.fieldName === keyString);
+
+      if (replacingValue && replacingValue.value) {
+        replacingValue = { ...replacingValue, value: replacingValue.value };
+      }
+    }
+
+    // Handle to_ prefix
+    if (!replacingValue) {
+      replacingValue = fieldsContainer.find((f) => 'to_' + f.fieldName === keyString);
+      if (replacingValue && replacingValue.value) {
+        replacingValue = { ...replacingValue, value: replacingValue.value };
+      }
+    }
+
+    // Format date fields
+    if (replacingValue && replacingValue.value && replacingValue.fieldType === 'date') {
+      replacingValue = { ...replacingValue, value: replacingValue.value };
+    } else if (replacingValue && replacingValue.value && replacingValue.fieldType === 'dateFromTo') {
+      if ('from_' + replacingValue.fieldName === keyString) {
+        replacingValue = { ...replacingValue, value: formatDate(data['from_' + replacingValue.fieldName]) };
+      }
+      if ('to_' + replacingValue.fieldName === keyString) {
+        replacingValue = { ...replacingValue, value: formatDate(data['to_' + replacingValue.fieldName]) };
+      }
+    } else if (replacingValue && replacingValue.value && replacingValue.fieldType === 'onlyMonthFromTo') {
+      if ('from_' + replacingValue.fieldName === keyString) {
+        replacingValue = { ...replacingValue, value: formatMonth(data['from_' + replacingValue.fieldName]) };
+      }
+      if ('to_' + replacingValue.fieldName === keyString) {
+        replacingValue = { ...replacingValue, value: formatMonth(data['to_' + replacingValue.fieldName]) };
+      }
+    }
+
+    // Replace in temp
+    if (replacingValue && replacingValue.value) {
+      temp = temp.replace(new RegExp('\\$' + keyString + '\\$', 'g'), replacingValue.value);
+    } else {
+      temp = temp.replace(new RegExp('\\$' + keyString + '\\$', 'g'), 'null');
+    }
+  });
+
+  return temp;
+}
+
+// function formatDate(dateInput) {
+//   console.log(dateInput)
+//   const date = new Date(dateInput);
+//   console.log(date)
+//   if (isNaN(date)) return null;
+//   const mm = String(date.getMonth() + 1).padStart(2, '0');
+//   const dd = String(date.getDate()).padStart(2, '0');
+//   const yyyy = date.getFullYear();
+//   return `${mm}/${dd}/${yyyy}`;
+// }
+
+function formatDate(dateInput) {
+  // dd/mm/yyyy
+
+  const [day, month, year] = dateInput.split('/');
+
+  // const date = new Date(`${year}-${month}-${day}`);
+
+  // console.log(date);
+  // if (isNaN(date)) return null;
+  // const mm = String(date.getMonth() + 1).padStart(2, '0');
+  // const dd = String(date.getDate()).padStart(2, '0');
+  // const yyyy = date.getFullYear();
+  return `${month}/${day}/${year}`;
+}
+
+function formatMonth(dateInput) {
+  // dd/mm/yyyy
+
+  const [month, year] = dateInput.split('/');
+
+  // const date = new Date(`${year}-${month}-${day}`);
+
+  // console.log(date);
+  // if (isNaN(date)) return null;
+  // const mm = String(date.getMonth() + 1).padStart(2, '0');
+  // const dd = String(date.getDate()).padStart(2, '0');
+  // const yyyy = date.getFullYear();
+  return `${month}/01/${year}`;
+}
+
+// Example usage:
+// let temp = '{"from_date":"$from_date$","to_date":"$to_date$"}';
+// let fieldsContainer = [
+//   { fieldName: 'date', fieldType: 'date', value: '2025-08-10' },
+//   { fieldName: 'range', fieldType: 'dateFromTo', value: '' },
+// ];
+// let data = { from_date: '01/08/2025', to_date: '05/08/2025' };
+
+// temp = replaceDateFields(temp, fieldsContainer, data);
+// console.log(temp);
+
+export const generateTableData = (
+  tableData,
+  configJson,
+  locationListSearch,
+  parentLocationListSearch,
+  checkLineListwise,
+  downloadLinelistExcel,
+  setShowLineList,
+  currentLocationId,
+  canDrillDown
+) => {
+  const thead = [];
+  let allowDrillDown = false;
+  const tbody = [];
+  let containers = configJson.containers;
+  let data = configJson.filterDisplay;
+  data = data?.reduce((acc, item) => {
+    acc[item.fieldName] = item.value;
+    return acc;
+  }, {});
+  const locationField = containers?.fieldsContainer?.find(
+    (container) => container?.fieldType === 'location'
+  );
+  if (locationField) {
+    const isMultiSelect =
+      Array.isArray(
+        locationField?.selectedLocation?.finalSelected?.optionSelected
+      ) && locationField.selectedLocation.finalSelected.optionSelected.length > 1;
+    allowDrillDown = !isMultiSelect;
+  }
+  const locationLevelSelected =
+    configJson.locationLevelSelected ?? locationField?.selectedLocation?.finalSelected?.optionSelected?.level ?? 0;
+  if (tableData && tableData.length > 0) {
+    const tableColumns = Object.keys(tableData[0]);
+    tableColumns.forEach((column) => {
+      let headPushed = false;
+
+      let label = column.includes('percent_col') ? '%' : column;
+      containers?.tableFieldContainer?.forEach((tableField) => {
+        if (
+          column === tableField.fieldName &&
+          tableField.isLink === true &&
+          (!tableField.locationLevelForLink ||
+            tableField.locationLevelForLink == '' ||
+            (locationLevelSelected !== undefined &&
+              locationLevelSelected !== null &&
+              locationLevelSelected >= tableField.locationLevelForLink))
+        ) {
+          const regex =
+            /([a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*?)\(\{\s*"id"\s*:\s*"([^"]+)"\s*,\s*"queryParams"\s*:\s*(\{.*\})\s*\}\)/;
+          const match = tableField?.customState.match(regex);
+          const targetUuid = match?.[2];
+          const hasDrillDownPermission = canDrillDown;
+
+          if (hasDrillDownPermission) {
+            setShowLineList(true, targetUuid);
+          }
+
+          thead.push({
+            field: column,
+            label: label,
+            align: 'left',
+            isLink: hasDrillDownPermission,
+            disabled: (row) => {
+              const value = row[column];
+              return value === 0 || value === null;
+            },
+            onClick: hasDrillDownPermission
+              ? (row) => {
+                    const lineListwise = checkLineListwise();
+                    if (lineListwise) {
+                      const formatToCamelCase = (str) => str.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
+                      let path;
+                      if (match) {
+                        let structure = match[1].replace(/\./g, '/');
+                        structure = formatToCamelCase(structure);
+                        structure = structure.replace(/^techo\//, '/ui/medplat/');
+
+                        const id = match[2];
+                        let queryParams;
+
+                        try {
+                          let rawQueryParams = match[3];
+                          let rowFields = rawQueryParams.match(/@(.*?)@/g);
+                          if (rowFields) {
+                            rowFields.forEach((field) => {
+                              const fieldName = field.slice(1, -1);
+                              rawQueryParams = rawQueryParams.replace(new RegExp(field, 'g'), row[fieldName]);
+                            });
+                          }
+                          let dateFields = rawQueryParams.match(/\$(.*?)\$/g);
+                          if (dateFields) {
+                            rawQueryParams = replaceDateFields(rawQueryParams, containers.fieldsContainer, data);
+                          }
+                          queryParams = encodeURIComponent(rawQueryParams);
+                        } catch {
+                          queryParams = 'null';
+                        }
+                        path = `${structure}/${id}?queryParams=${queryParams}`;
+                        path = path.replace(/^techo\//, '/ui/medplat/');
+                      } else {
+                        path = tableField?.customState.replace(/\./g, '/');
+                        path = formatToCamelCase(path);
+                        path = path.replace(/^techo\//, '/ui/medplat/');
+                      }
+                      window.open(path, '_blank');
+                    } else {
+                      downloadLinelistExcel(row, tableField);
+                    }
+                  }
+                : undefined,
+              sortable: true,
+              isSticky: tableField.isSticky,
+            });
+
+
+          headPushed = true;
+        } else if (column === tableField.fieldName) {
+          thead.push({
+            field: column,
+            label: label,
+            sortable: true,
+            align: 'left',
+            isSticky: tableField.isSticky,
+          });
+
+          headPushed = true;
+        }
+      });
+
+      if (!headPushed) {
+        if ((column === 'Location' || column === 'Location Name') && allowDrillDown) {
+          thead.push({
+            field: column,
+            label: label,
+            sortable: true,
+            align: 'left',
+
+            render: (row) => {
+              if (row) {
+                const val = row[column]?.displayValue || row[column] || '';
+                const isTotal = val === 'Total' || val === '<b>Total<b>' || val === '<b>Total</b>';
+                const hasHiddenLocation = row.hidden_location_id;
+                
+                const condition = !isTotal && allowDrillDown && hasHiddenLocation && !currentLocationId?.isLimitReached;
+                return (
+                  <span
+                    style={{
+                      cursor: condition ? 'pointer' : 'default',
+                      color: condition ? 'blue' : '',
+                      textDecoration: condition ? 'underline' : 'none',
+                    }}
+                    onClick={() => {
+                      if (condition) {
+                        locationListSearch(row);
+                      }
+                    }}
+                    dangerouslySetInnerHTML={{ __html: val }}
+                  />
+                );
+              }
+            },
+          });
+        } else if ((column === 'Parent Location') && allowDrillDown) {
+          thead.push({
+            field: column,
+            label: label,
+            sortable: true,
+            align: 'left',
+
+            render: (row) => {
+              if (row) {
+                const val = row[column]?.displayValue || row[column] || '';
+                const isTotal = val === 'Total' || val === '<b>Total<b>' || val === '<b>Total</b>';
+                const condition = !isTotal && allowDrillDown && !currentLocationId?.isFirstLevel;
+                return (
+                  <span
+                    style={{
+                      cursor: condition ? 'pointer' : 'default',
+                      color: condition ? 'blue' : 'black',
+                      textDecoration: condition ? 'underline' : 'none',
+                    }}
+                    onClick={() => {
+                      if (condition) {
+                        parentLocationListSearch();
+                      }
+                    }}
+                    dangerouslySetInnerHTML={{ __html: val }}
+                  />
+                );
+              }
+            },
+          });
+        } else {
+          thead.push({ field: column, label: label, sortable: true, align: 'left' });
+        }
+      }
+    });
+
+    tableData.forEach((rowData) => {
+      const rowObject = {};
+
+      Object.keys(rowData).forEach((key) => {
+        const columnData = thead.find((headObject) => headObject.field === key);
+        if (columnData) {
+          if (columnData.customStyle) {
+            const rowFields = columnData.customStyle.match(/@(.*?)@/g);
+            if (rowFields) {
+              rowFields.forEach((field) => {
+                const fieldName = field.substring(1, field.length - 1);
+                columnData.customStyle = columnData.customStyle.replace(
+                  new RegExp(field, 'g'),
+                  `row['${fieldName}'].displayValue`
+                );
+              });
+            }
+          }
+          rowObject[key] = { ...columnData, displayValue: rowData[key] || '-' };
+        }
+      });
+
+      tbody.push(rowObject);
+    });
+  }
+
+  return {
+    header: thead,
+    body: tbody,
+    allowDrillDown,
+  };
+};

package/src/common/services/util/WebSocketContext.jsx

@@ -0,0 +1,261 @@
+import React, { createContext, useContext, useRef, useState, useCallback, useEffect } from 'react';
+import { Client } from '@stomp/stompjs';
+import CryptoJS from 'crypto-js';
+import PropTypes from 'prop-types';
+
+const WebSocketContext = createContext(null);
+export const WebSocketProvider = ({ children, userId, authToken, serverPath }) => {
+  // --- Refs ---
+  const stompClient = useRef(null);
+  const subscribers = useRef([]);
+  const authRef = useRef({ userId, authToken });
+  // --- State ---
+  const [isConnected, setIsConnected] = useState(false);
+  const [deviceInfo, setLocalDeviceInfo] = useState(localStorage.getItem('DeviceInfo')); // eslint-disable-line no-unused-vars
+  // --- Helpers ---
+  const getHashedUserId = (uid) => {
+    return uid ? CryptoJS.MD5(uid.toString()).toString() : null;
+  };
+  const setConnectionStatus = (status) => {
+    localStorage.setItem('isExternalDeviceConnected', status);
+  };
+  const buildWebSocketUrl = (hashedUserId, deviceType) => {
+    // serverPath might be "http://localhost:8181" or "https://example.com"
+    // Convert http -> ws, https -> wss
+    const wsBase = serverPath.replace(/^http/, 'ws');
+    // Use the native endpoint
+    return `${wsBase}/ws-native?userId=${hashedUserId}&deviceType=${deviceType}`;
+  };
+  // --- Core WebSocket Logic ---
+  const disconnect = useCallback(() => {
+    if (stompClient.current) {
+      try {
+        stompClient.current.deactivate();
+      } catch (e) {
+        console.error('Error during deactivation', e);
+      }
+      stompClient.current = null;
+    }
+    setIsConnected(false);
+  }, []);
+  const connect = useCallback(
+    (callback) => {
+      const currentUserId = authRef.current.userId;
+      const hashedUserId = getHashedUserId(currentUserId);
+      if (!currentUserId) {
+        console.warn(':no_entry: Cannot connect, no userId provided.');
+        return;
+      }
+      // Prevent duplicate connections
+      if (stompClient.current && stompClient.current.active) {
+        if (typeof callback === 'function') callback();
+        return;
+      }
+      // Cleanup stale client
+      if (stompClient.current) {
+        stompClient.current.deactivate();
+      }
+      const deviceType = 'web';
+      const wsUrl = buildWebSocketUrl(hashedUserId, deviceType);
+      const client = new Client({
+        // Native WebSocket, no SockJS
+        brokerURL: wsUrl,
+        connectHeaders: {
+          'user-id': hashedUserId,
+          'device-type': deviceType,
+        },
+        debug: (str) => {
+          if (str && (str.includes('ERROR') || str.includes('Connected'))) {
+            //
+          }
+        },
+        reconnectDelay: 5000,
+        heartbeatIncoming: 20000,
+        heartbeatOutgoing: 20000,
+        // In browser, ensure it uses WebSocket
+        webSocketFactory: () => new WebSocket(wsUrl),
+      });
+      // --- Event Handlers ---
+      client.onConnect = (frame) => { // eslint-disable-line no-unused-vars
+        // 1. General messages
+        client.subscribe('/user/queue/messages', (message) => {
+          try {
+            const incomingMessage = JSON.parse(message.body);
+            subscribers.current.forEach((fn) => {
+              try {
+                fn(incomingMessage);
+              } catch (e) {
+                console.error('Subscriber error:', e);
+              }
+            });
+          } catch (err) {
+            console.error('[WS] Error parsing message:', err);
+          }
+        });
+        // 2. Recording / control messages
+        client.subscribe('/user/queue/recording', (message) => {
+          try {
+            const incomingMessage = JSON.parse(message.body);
+            // Handle verify_credentials flow
+            if (incomingMessage.command === 'verify_credentials') {
+              const isValid = incomingMessage.token === authRef.current.authToken;
+              const response = {
+                userId: getHashedUserId(authRef.current.userId),
+                command: 'credentials_response',
+                status: isValid ? 'success' : 'failure',
+                message: isValid ? 'Valid credentials' : 'Invalid credentials',
+              };
+              setTimeout(() => {
+                try {
+                  if (client.connected) {
+                    client.publish({
+                      destination: '/app/recording',
+                      body: JSON.stringify(response),
+                    });
+                  }
+                } catch (e) {
+                  console.error('Send error:', e);
+                }
+              }, 300);
+              return;
+            }
+            // Dispatch normal messages
+            subscribers.current.forEach((fn) => {
+              try {
+                fn(incomingMessage);
+              } catch (e) {
+                console.error('Subscriber error:', e);
+              }
+            });
+          } catch (err) {
+            console.error('[WS] Error processing recording message:', err);
+          }
+        });
+        if (typeof callback === 'function') callback();
+      };
+      client.onStompError = (frame) => {
+        console.error('Broker reported error: ' + frame.headers['message']);
+        console.error('Additional details: ' + frame.body);
+      };
+      client.onWebSocketClose = () => {
+
+        setIsConnected(false);
+      };
+      // Activate the client
+      client.activate();
+      stompClient.current = client;
+    },
+    [serverPath]
+  );
+  // --- Public API exposed by context ---
+  const subscribeToRecordingStatus = useCallback((callback) => {
+    if (typeof callback !== 'function') return;
+    if (!subscribers.current.includes(callback)) {
+      subscribers.current.push(callback);
+
+    }
+    return () => {
+      subscribers.current = subscribers.current.filter((cb) => cb !== callback);
+
+    };
+  }, []);
+  const clearSubscribers = useCallback(() => {
+    subscribers.current = [];
+  }, []);
+  const sendRecordingCommand = useCallback((command, sampleId) => {
+    if (!stompClient.current || !stompClient.current.connected) {
+      console.warn(':no_entry: Cannot send command, STOMP not connected.');
+      return;
+    }
+
+    const targetDevice = getDeviceInfo() ? JSON.parse(getDeviceInfo()) : null;
+    const message = {
+      userId: getHashedUserId(authRef.current.userId),
+      command,
+      sampleId,
+      sourceDeviceType: 'web',
+      targetDeviceType: targetDevice?.deviceType || 'mobile',
+    };
+    try {
+      stompClient.current.publish({
+        destination: '/app/recording',
+        body: JSON.stringify(message),
+      });
+    } catch (e) {
+      console.error('Failed to send command:', e);
+    }
+  }, []);
+  // --- Local Storage helpers ---
+  const setDeviceInfo = (info) => {
+    localStorage.setItem('DeviceInfo', info);
+    setLocalDeviceInfo(info);
+  };
+  const getDeviceInfo = () => {
+    return localStorage.getItem('DeviceInfo');
+  };
+  const getConnectionInfo = () => {
+    return {
+      wsUrl: stompClient.current?.webSocket?.url || '',
+      userId: getHashedUserId(authRef.current.userId),
+      protocol: 'stomp@1.2',
+    };
+  };
+  const getConnectionStatus = () => {
+    return localStorage.getItem('isExternalDeviceConnected');
+  };
+  useEffect(() => {
+    const handleBeforeUnload = () => {
+      localStorage.setItem('isExternalDeviceConnected', false);
+    };
+    window.addEventListener('beforeunload', handleBeforeUnload);
+    return () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+    };
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (stompClient.current) {
+        stompClient.current.deactivate();
+      }
+    };
+  }, []);
+  // Keep auth data fresh in ref
+  useEffect(() => {
+    authRef.current = { userId, authToken };
+    // If user logs out (userId becomes null/undefined), disconnect
+    if (!userId && stompClient.current) {
+      disconnect();
+    }
+  }, [userId, authToken, disconnect]);
+
+  const contextValue = {
+    connect,
+    disconnect,
+    subscribeToRecordingStatus,
+    clearSubscribers,
+    sendRecordingCommand,
+    isConnected,
+    setConnectionStatus,
+    setDeviceInfo,
+    getDeviceInfo,
+    getConnectionInfo,
+    getConnectionStatus,
+  };
+  return <WebSocketContext.Provider value={contextValue}>{children}</WebSocketContext.Provider>;
+};
+
+WebSocketProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  userId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  authToken: PropTypes.string,
+  serverPath: PropTypes.string.isRequired,
+};
+// Custom Hook
+export const useWebSocket = () => {
+  const context = useContext(WebSocketContext);
+  if (!context) {
+    throw new Error('useWebSocket must be used within a WebSocketProvider');
+  }
+  return context;
+};