@visns-studio/visns-components 5.15.14 → 5.15.16

package/README.md

@@ -13,6 +13,7 @@ VISNS Components is a React-based UI component library that provides a set of re
 
 ### Latest Enhancements
 
+- **Phone and ABN Formatting**: Added specialized formatting for Australian phone numbers and ABNs across DataGrid, GenericDetail, and JSON fields with format support
 - **CameraPlacement Legacy Import**: Added comprehensive legacy JSON file import functionality with support for multiple data formats, automatic image loading, and seamless database integration
 - **CameraPlacement Module**: Enhanced interactive camera placement tool with improved UI consistency, better icon visibility, drag-and-drop image upload, professional export capabilities, and complete Verkada database integration
 - **Complete StandardModal Migration**: All components now use StandardModal instead of reactjs-popup for consistent modal behavior across the entire library
@@ -586,6 +587,8 @@ The DataGrid component utilizes a modular column renderer system with 28 special
 - `json` - JSON data extraction and display
 - `number` - Numeric values
 - `option` - Option mapping with placeholders
+- `phone` - Phone number formatting for Australian numbers
+- `abn` - Australian Business Number formatting
 - `placeholder` - Static placeholder text
 - `age` - Age calculation from dates
 - `coding` - Custom coding logic
@@ -677,6 +680,72 @@ The `html5_date` column type provides native HTML5 date picker functionality in
 }
 ```
 
+#### Phone and ABN Formatting
+
+The DataGrid and GenericDetail components include specialized formatting for Australian phone numbers and ABNs (Australian Business Numbers).
+
+##### Phone Number Formatting
+
+The `phone` column type automatically formats phone numbers according to Australian standards:
+
+**Supported Formats:**
+- **Mobile Numbers**: `0400 000 000` (04XX XXX XXX)
+- **1300/1800 Numbers**: `1300 000 000` (1300 XXX XXX)
+- **Landline Numbers**: `(02) 0000 0000` ((0X) XXXX XXXX)
+- **Generic Formatting**: Applied to other number patterns
+- **Fallback**: Returns original value if no pattern matches
+
+**Configuration Examples:**
+
+DataGrid:
+```jsx
+{
+    id: 'phone',
+    label: 'Phone Number',
+    type: 'phone',
+    width: '15%'
+}
+```
+
+GenericDetail:
+```jsx
+{
+    id: 'phone',
+    label: 'Phone Number',
+    type: 'phone',
+    relation: ['company'] // Also works with relationship fields
+}
+```
+
+JSON Fields with Format:
+```jsx
+{
+    id: 'contact_data',
+    label: 'Contact',
+    type: 'json',
+    jsonData: 'phone',
+    format: 'phone' // Applies phone formatting to JSON field values
+}
+```
+
+##### ABN Formatting
+
+The `abn` column type formats Australian Business Numbers:
+
+**Format**: `00 000 000 000` (XX XXX XXX XXX)
+- Validates 11-digit ABNs
+- Returns original value if not valid format
+
+**Configuration Example:**
+```jsx
+{
+    id: 'abn',
+    label: 'ABN',
+    type: 'abn',
+    width: '15%'
+}
+```
+
 #### Intelligent Relationship Sorting
 
 The DataGrid component includes intelligent sorting capabilities that automatically detect and enable sorting for relationship and JSON fields. This feature works seamlessly with the backend `HasRelationshipSorting` trait.

package/package.json

@@ -94,7 +94,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.15.14",
+    "version": "5.15.16",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/DataGrid.jsx

@@ -2412,6 +2412,22 @@ const DataGrid = forwardRef(
                 }
             }
 
+            // Check function-based condition if it exists
+            if (allow && s.condition && typeof s.condition === 'function') {
+                try {
+                    console.log('🔍 DataGrid: Evaluating condition for setting:', s.id, 'with data:', d);
+                    const conditionResult = s.condition(d);
+                    console.log('🔍 DataGrid: Condition result:', conditionResult, 'for setting:', s.id);
+                    if (!conditionResult) {
+                        allow = false;
+                        console.log('🔍 DataGrid: Setting blocked by condition:', s.id);
+                    }
+                } catch (error) {
+                    console.warn('🔍 DataGrid: Condition function error for setting:', s.id, error);
+                    allow = false;
+                }
+            }
+
             if (allow) {
                 switch (s.id) {
                     case 'activate':
@@ -2456,6 +2472,8 @@ const DataGrid = forwardRef(
                         return getIconComponent(RotateCcw);
                     case 'update':
                         return getIconComponent(Edit);
+                    case 'romComplete':
+                        return getIconComponent(CheckCircle);
                     default:
                         return null;
                 }

package/src/components/columns/ColumnRenderers.jsx

@@ -1047,10 +1047,14 @@ export const renderJsonColumn = ({ column, commonProps }) => {
                                                         ? val
                                                             ? 'Yes'
                                                             : 'No'
-                                                        : String(val).substring(
-                                                              0,
-                                                              15
-                                                          )
+                                                        : (() => {
+                                                              // Check if column has format = 'phone' and apply phone formatting
+                                                              if (column.format === 'phone') {
+                                                                  return formatPhoneNumber(String(val));
+                                                              }
+                                                              // Default string handling
+                                                              return String(val).substring(0, 15);
+                                                          })()
                                                     : 'N/A'}
                                             </span>
                                         </div>

package/src/components/generic/GenericDetail.jsx

@@ -1008,6 +1008,62 @@ function GenericDetail({
 
         const renderDateTime = () => formatDateTimeValue(value);
 
+        const renderPhone = () => {
+            if (!value) return '';
+            
+            // Remove all non-digit characters
+            const cleanNumber = value.replace(/\D/g, '');
+            
+            // Check if it's an Australian mobile number (starts with 04 and has 10 digits)
+            if (cleanNumber.match(/^04\d{8}$/)) {
+                // Mobile format: 0400 000 000
+                return cleanNumber.replace(/(\d{4})(\d{3})(\d{3})/, '$1 $2 $3');
+            }
+            
+            // Check if it's a 1300/1800 number (10 digits starting with 1300 or 1800)
+            if (cleanNumber.match(/^1[38]00\d{6}$/)) {
+                // 1300/1800 format: 1300 000 000
+                return cleanNumber.replace(/(\d{4})(\d{3})(\d{3})/, '$1 $2 $3');
+            }
+            
+            // Check if it's an Australian landline number (8 digits with area code, or 10 digits total)
+            if (cleanNumber.match(/^0[2-9]\d{8}$/)) {
+                // Landline format: (02) 0000 0000
+                return cleanNumber.replace(/(\d{2})(\d{4})(\d{4})/, '($1) $2 $3');
+            }
+            
+            // If it doesn't match standard Australian patterns, return as is with some basic formatting
+            if (cleanNumber.length >= 8) {
+                // Generic formatting for longer numbers
+                if (cleanNumber.length === 8) {
+                    return cleanNumber.replace(/(\d{4})(\d{4})/, '$1 $2');
+                } else if (cleanNumber.length === 9) {
+                    return cleanNumber.replace(/(\d{1})(\d{4})(\d{4})/, '$1 $2 $3');
+                } else if (cleanNumber.length === 10) {
+                    return cleanNumber.replace(/(\d{2})(\d{4})(\d{4})/, '($1) $2 $3');
+                }
+            }
+            
+            // Return original if no formatting pattern matches
+            return value;
+        };
+
+        const renderABN = () => {
+            if (!value) return '';
+            
+            // Remove all non-digit characters
+            const cleanABN = value.replace(/\D/g, '');
+            
+            // Check if it's a valid 11-digit ABN
+            if (cleanABN.length === 11) {
+                // Format as: 00 000 000 000
+                return cleanABN.replace(/(\d{2})(\d{3})(\d{3})(\d{3})/, '$1 $2 $3 $4');
+            }
+            
+            // Return original if not 11 digits
+            return value;
+        };
+
         const renderFile = () => {
             if (value) {
                 return (
@@ -1222,9 +1278,15 @@ function GenericDetail({
                     return options[0];
                 }
             } else {
-                return size === 'full' && truncatedValue
-                    ? parse(`<br /><p>${truncatedValue}</p>`)
-                    : truncatedValue;
+                // Check if this is a phone type and apply phone formatting
+                let displayValue = truncatedValue;
+                if (type === 'phone' && displayValue) {
+                    displayValue = renderPhone();
+                }
+                
+                return size === 'full' && displayValue
+                    ? parse(`<br /><p>${displayValue}</p>`)
+                    : displayValue;
             }
         };
 
@@ -1476,6 +1538,10 @@ function GenericDetail({
                 return renderOptions();
             case 'password':
                 return renderPassword();
+            case 'phone':
+                return renderPhone();
+            case 'abn':
+                return renderABN();
             case 'relation':
                 return renderRelation();
             case 'richtext':

package/src/components/generic/shared/formatters.js

@@ -15,6 +15,11 @@ const interpretBooleanValue = (value, column) => {
     
     if (!isTrue && !isFalse) return value; // Return original if not clearly boolean
     
+    // Check for custom boolean labels first
+    if (column.booleanLabels && typeof column.booleanLabels === 'object') {
+        return isTrue ? column.booleanLabels.true : column.booleanLabels.false;
+    }
+    
     // Contextual interpretations based on column name patterns
     const interpretations = {
         // Status/State patterns