@visns-studio/visns-components 5.15.15 → 5.15.17

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

@@ -7,7 +7,7 @@
         "@fontsource/barlow": "^5.2.6",
         "@inovua/reactdatagrid-community": "^5.10.2",
         "@inovua/reactdatagrid-enterprise": "^5.10.2",
-        "@mapbox/mapbox-gl-geocoder": "^5.1.0",
+        "@mapbox/mapbox-gl-geocoder": "^5.1.1",
         "@nivo/bar": "^0.99.0",
         "@nivo/core": "^0.99.0",
         "@nivo/line": "^0.99.0",
@@ -24,7 +24,7 @@
         "array-move": "^4.0.0",
         "awesome-debounce-promise": "^2.1.0",
         "browser-image-compression": "^2.0.2",
-        "dayjs": "^1.11.13",
+        "dayjs": "^1.11.14",
         "fabric": "^6.7.1",
         "file-saver": "^2.0.5",
         "framer-motion": "^12.23.12",
@@ -32,7 +32,7 @@
         "html2canvas": "^1.4.1",
         "lodash": "^4.17.21",
         "lodash.debounce": "^4.0.8",
-        "lucide-react": "^0.541.0",
+        "lucide-react": "^0.542.0",
         "mapbox-gl": "^3.14.0",
         "moment": "^2.30.1",
         "motion": "^12.23.12",
@@ -64,7 +64,7 @@
         "reactjs-popup": "^2.0.6",
         "style-loader": "^4.0.0",
         "swapy": "^1.0.5",
-        "sweetalert2": "^11.22.4",
+        "sweetalert2": "^11.22.5",
         "tesseract.js": "^6.0.1",
         "truncate": "^3.0.0",
         "uuid": "^11.1.0",
@@ -86,7 +86,7 @@
         "mini-css-extract-plugin": "^2.9.4",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "sass": "^1.90.0",
+        "sass": "^1.91.0",
         "sass-loader": "^16.0.5"
     },
     "peerDependencies": {
@@ -94,7 +94,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.15.15",
+    "version": "5.15.17",
     "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/generic/GenericReport.jsx

@@ -1513,10 +1513,49 @@ const GenericReportImproved = ({
 
     // Start again function to reset wizard to home
     const startAgain = () => {
-        // Reset all state
+        console.log('🔄 [DEBUG] StartAgain called - BEFORE reset:', {
+            selectedTemplate: selectedTemplate?.id,
+            customUrls: customUrls,
+            groupingConfig: groupingConfig,
+        });
+
+        // Reset wizard state
+        setCurrentWizardStep(0);
+        setShowTemplates(true);
+        setShowBusinessTemplates(false);
+        
+        // CRITICAL FIX: Reset template selection
+        setSelectedTemplate(null);
+        
+        // Reset database schema state
         setSelectedTable(null);
+        setTableColumns([]);
+        setAvailableTables([]);
+        setDetectedJoins({});
+        setIsLoadingDetectedJoins({});
+        
+        // Reset report configuration
         setSelectedColumns([]);
         setJoins([]);
+        setReportName('');
+        setIsPublic(false);
+        setLoadedReportId(null);
+        
+        // Reset manual relationship state
+        setShowManualJoinForm(false);
+        setManualJoin({
+            sourceTable: '',
+            targetTable: '',
+            sourceColumn: '',
+            targetColumn: '',
+            joinType: 'INNER JOIN',
+        });
+        setManualJoinColumns({
+            source: [],
+            target: [],
+        });
+        
+        // Reset sorting and filtering
         setFilterCriteria({
             operator: 'AND',
             groups: [
@@ -1529,16 +1568,68 @@ const GenericReportImproved = ({
         setSortCriteria([]);
         setShowSortingSection(false);
         setShowFilteringSection(false);
+        setShowSelectedFields(false);
+        
+        // CRITICAL FIX: Reset grouping configuration
+        setGroupingConfig({
+            enabled: false,
+            groupByField: '',
+            groupDisplayName: '',
+            sortBy: '',
+            sortDirection: 'asc',
+            rowsPerGroup: 10,
+            showEmptyRows: false,
+            showGroupTotals: false,
+            expandable: true,
+            groupHeaderStyle: 'primary',
+            emptyRowStyle: 'light',
+        });
+        
+        // CRITICAL FIX: Reset custom URLs
+        setCustomUrls({
+            executeUrl: '',
+            exportUrl: '',
+        });
+        
+        // Reset report execution and preview
         setPreviewData([]);
+        setGroupedData(null);
         setGridColumns([]);
-        setReportName('');
-        setIsPublic(false);
-        setLoadedReportId(null); // Reset loaded report ID
-        setCurrentWizardStep(0);
-        setShowTemplates(true);
-        setTableColumns([]);
-        setAvailableTables([]);
-        setHasAutoExecuted(false); // Reset auto-execute flag
+        setTotalResults(0);
+        setHasAutoExecuted(false);
+        
+        // Reset pagination
+        setCurrentPage(1);
+        setPageSize(10);
+        setTotalPages(0);
+        setTotalCount(0);
+        
+        // Reset calculated fields
+        setCustomCalculatedFields([]);
+        setCalculatedFieldForm({
+            displayName: '',
+            formula: '',
+            type: 'decimal',
+        });
+        setShowCalculatedFieldModal(false);
+        
+        // Reset unique fields and exclusions
+        setUniqueFieldConfig({
+            enabled: false,
+            selectedField: '',
+        });
+        setExcludedRows(new Set());
+        setShowRowExclusionModal(false);
+        setExportType('regular');
+        
+        // Reset UI state
+        setShowHiddenFields(false);
+
+        console.log('✅ [DEBUG] StartAgain completed - AFTER reset:', {
+            selectedTemplate: null,
+            customUrls: { executeUrl: '', exportUrl: '' },
+            groupingConfig: { enabled: false },
+        });
 
         toast.info(
             'Report builder reset. You can start creating a new report.'
@@ -2336,6 +2427,13 @@ const GenericReportImproved = ({
                         }
                     } else {
                         // For predefined templates, use the existing approach
+                        console.log('🚨 [DEBUG] Using predefined template approach:', {
+                            selectedTemplate: selectedTemplate,
+                            selectedTemplateId: selectedTemplate?.id,
+                            fallbackId: 'utilization_planning',
+                            finalTemplateId: selectedTemplate?.id || 'utilization_planning',
+                        });
+                        
                         payload = {
                             template_id:
                                 selectedTemplate?.id || 'utilization_planning',
@@ -2756,7 +2854,7 @@ const GenericReportImproved = ({
                                 lowerKey.includes('disabled')
                             ) {
                                 // Check if values look like boolean/status values
-                                const sampleValues = firstPageResult.data
+                                const sampleValues = dataToProcess
                                     .slice(0, 5)
                                     .map((row) => row[key]);
                                 const hasStatusValues = sampleValues.some(
@@ -2814,7 +2912,15 @@ const GenericReportImproved = ({
                     setGridColumns(dynamicColumns);
                 } else {
                     // Fallback to selected columns if no data
-                    const columns = selectedColumns.map((col) => {
+                    console.log('🔧 [DEBUG] Creating fallback columns from selectedColumns:', selectedColumns);
+                    if (!Array.isArray(selectedColumns) || selectedColumns.length === 0) {
+                        console.warn('⚠️ selectedColumns is not a valid array:', selectedColumns);
+                        setGridColumns([]);
+                        return;
+                    }
+                    
+                    const columns = selectedColumns.map((col, index) => {
+                        try {
                         // Find column type from table columns with enhanced detection
                         let columnType = 'varchar';
                         const tableColumn = tableColumns.find(
@@ -2852,37 +2958,52 @@ const GenericReportImproved = ({
 
                         return {
                             name:
-                                col.displayName || `${col.table}.${col.column}`,
-                            header: col.displayName || formatName(col.column),
+                                col.displayName || `${col.table || 'unknown'}.${col.column}`,
+                            header: col.displayName || formatName(col.column || 'Unknown Column'),
                             defaultFlex: 1,
                             minWidth: 100,
                             render: ({ value }) => {
-                                const formattedValue = formatSmartValue(
-                                    value,
-                                    col.column,
-                                    columnType
-                                );
-
-                                // For JSON content, wrap in a container that allows full height expansion
-                                if (isJsonValue(value)) {
-                                    return (
-                                        <div
-                                            style={{
-                                                whiteSpace: 'normal',
-                                                wordWrap: 'break-word',
-                                                lineHeight: '1.4',
-                                                padding: '4px 0',
-                                                width: '100%',
-                                            }}
-                                        >
-                                            {formattedValue}
-                                        </div>
+                                try {
+                                    const formattedValue = formatSmartValue(
+                                        value,
+                                        col.column,
+                                        columnType
                                     );
-                                }
 
-                                return formattedValue;
+                                    // For JSON content, wrap in a container that allows full height expansion
+                                    if (isJsonValue(value)) {
+                                        return (
+                                            <div
+                                                style={{
+                                                    whiteSpace: 'normal',
+                                                    wordWrap: 'break-word',
+                                                    lineHeight: '1.4',
+                                                    padding: '4px 0',
+                                                    width: '100%',
+                                                }}
+                                            >
+                                                {formattedValue}
+                                            </div>
+                                        );
+                                    }
+
+                                    return formattedValue;
+                                } catch (renderError) {
+                                    console.warn('🚨 Cell render error:', renderError, 'for value:', value);
+                                    return String(value || '');
+                                }
                             },
                         };
+                        } catch (colError) {
+                            console.warn('🚨 Column mapping error:', colError, 'for column:', col);
+                            return {
+                                name: `error_col_${index}`,
+                                header: 'Error Column',
+                                defaultFlex: 1,
+                                minWidth: 100,
+                                render: () => 'Error',
+                            };
+                        }
                     });
                     setGridColumns(columns);
                 }
@@ -2899,8 +3020,24 @@ const GenericReportImproved = ({
                 typeof fetchedDataCount
             );
         } catch (error) {
-            toast.error('Failed to execute report');
+            console.group('🚨 [ERROR] executeReport failed');
             console.error('Error executing report:', error);
+            console.log('Error name:', error.name);
+            console.log('Error message:', error.message);
+            console.log('Error stack:', error.stack);
+            console.log('Current state at error:', {
+                selectedTable,
+                selectedColumns: selectedColumns.length,
+                hasGrouping: selectedTemplate?.grouping?.enabled || groupingConfig.enabled,
+                currentPage,
+                pageSize,
+            });
+            console.groupEnd();
+            
+            // Only show toast error for actual failures, not for successful pagination
+            if (!error.message?.includes('successful')) {
+                toast.error(`Failed to execute report: ${error.message || 'Unknown error'}`);
+            }
         } finally {
             setIsLoading(false);
         }

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