@visns-studio/visns-components 5.15.14 → 5.15.15

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.15",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

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':