@visns-studio/visns-components 5.14.19 → 5.14.21

package/README.md

@@ -9,6 +9,18 @@ A comprehensive React component library used by the VISNS Studio team for CRM an
 
 VISNS Components is a React-based UI component library that provides a set of reusable, consistent, and customizable components for building web applications. It includes components for authentication, data grids, forms, navigation, and more, designed to work seamlessly together.
 
+## Recent Updates (v5.14.20)
+
+### Latest Enhancements
+
+- **GenericGrid Advanced Features**: Enhanced filtering with URL-based options, multiselect support, contact display integration, interactive date pickers with timezone support, and toggleable stage functionality
+- **Modular Architecture**: GenericIndex refactored into standalone GenericGrid and GenericReportForm components for better reusability
+- **Proposal System Integration**: GenericQuote enhanced with comprehensive proposal generation capabilities
+- **Smart Data Extraction**: DropZone component with intelligent data extraction for complex API responses
+- **Interactive Stage Management**: Clickable stage toggles with API integration and visual feedback
+- **Timezone Support**: Automatic timezone detection and conversion for date operations
+- **Contact Selection Workflows**: Two-step date and contact selection for survey systems
+
 ## Features
 
 ### Authentication System
@@ -180,6 +192,169 @@ The refactoring also introduced shared utility functions:
 
 These utilities are available for use in custom components and provide consistent functionality across the library.
 
+### GenericGrid Advanced Features
+
+#### Filter Enhancements (v5.10.12+)
+
+The GenericGrid component includes powerful filtering capabilities with URL-based options and multiselect support:
+
+```jsx
+// URL-based filter options
+{
+  id: 'status',
+  type: 'dropdown',
+  label: 'Status',
+  optionsUrl: '/api/filter-options/status',
+  optionsMethod: 'POST',
+  isMulti: true // Enables multiple selection
+}
+
+// Year filter with "now" default value
+{
+  id: 'year',
+  type: 'year',
+  label: 'Year',
+  defaultValue: 'now' // Displays current year
+}
+```
+
+**Key Features:**
+- **Dynamic Options**: Filters can fetch options from API endpoints using POST method
+- **Multiselect Control**: Use `isMulti` property for single/multiple selection control
+- **Smart Defaults**: Year filters properly handle "now" value to display current year
+- **Value Initialization**: Enhanced value formatting for MultiSelect components
+
+#### Contact Display Integration (v5.11.1+)
+
+GenericGrid automatically displays associated contacts when date fields have contact relationships:
+
+```jsx
+// Date column with contact display
+{
+  id: 'survey_date',
+  type: 'date',
+  header: 'Survey Date',
+  onClick: {
+    type: 'date_with_contacts',
+    title: 'Mark Survey Complete',
+    message: 'Select the survey completion date'
+  }
+}
+```
+
+**Features:**
+- **Date + Contact Display**: Shows formatted date with contact summary badge
+- **Contact Tooltips**: Hover over contact badge for full contact details
+- **Flexible Data Structure**: Supports both existing contacts and manual entries
+- **Responsive Design**: Contact badges adapt to different screen sizes
+
+#### Interactive Date Picker (v5.10.13+)
+
+Enhanced date cell interaction with confirmation dialogs and timezone support:
+
+```jsx
+// Date picker with timezone support
+{
+  id: 'completion_date',
+  type: 'date',
+  onClick: {
+    type: 'date_picker',
+    title: 'Set Completion Date',
+    message: 'Choose the completion date',
+    placeholder: 'Select date',
+    timezone: 'auto', // or 'Australia/Perth'
+    dateOnly: true // For DATE fields vs DATETIME
+  }
+}
+```
+
+**Timezone Features (v5.10.15+):**
+- **Automatic Detection**: `timezone: "auto"` detects browser timezone
+- **Australia/Perth Support**: Built-in support with `forcePerth: true`
+- **Custom Timezones**: Support any timezone with `timezone: "specific/timezone"`
+- **UTC Conversion**: Proper conversion between local timezone and UTC for API calls
+- **Field Type Awareness**: `dateOnly` parameter handles DATE vs DATETIME fields correctly
+
+#### Contact Selection Workflow (v5.11.0+)
+
+Two-step date and contact selection process for comprehensive data collection:
+
+```jsx
+// Date + contact selection configuration
+{
+  id: 'survey_date',
+  type: 'date',
+  onClick: {
+    type: 'date_with_contacts',
+    contactConfig: {
+      maxContacts: 5,
+      allowManual: true,
+      contactsEndpoint: '/api/contacts/search',
+      requiredFields: ['name', 'email']
+    }
+  }
+}
+```
+
+**Contact Selection Features:**
+- **ContactSelectorModal**: Modal for selecting existing or adding manual contacts
+- **Multiple Contact Types**: Database contacts (`type: 'contact'`) and manual entries (`type: 'manual'`)
+- **Flexible Limits**: Configurable contact limits and required fields
+- **Survey Integration**: Perfect for survey systems requiring contact associations
+
+#### Toggleable Stage Functionality (v5.12.2+)
+
+Interactive stage management with toggle functionality for both stage and stageCounter columns:
+
+```jsx
+// Basic stage column with toggle
+{
+  id: 'opportunity_stage',
+  type: 'stage',
+  keyIds: ['prospect', 'qualified', 'proposal', 'won'],
+  valueIds: ['Prospect', 'Qualified', 'Proposal', 'Won'],
+  toggleable: true,
+  toggleConfig: {
+    updateUrl: '/api/opportunities/{id}/stage',
+    updateMethod: 'PATCH',
+    updateKey: 'stage_field'
+  }
+}
+
+// StageCounter with individual stage toggles
+{
+  id: 'project_stages',
+  type: 'stageCounter',
+  stageConfig: {
+    key: 'milestones',
+    stageLabelKey: 'milestone_name',
+    stageColour: {
+      key: 'status',
+      options: [
+        { id: 'completed', colour: '#28a745' },
+        { id: 'pending', colour: '#6c757d' }
+      ]
+    },
+    toggleable: true,
+    toggleConfig: {
+      activeStatusValue: 'completed',
+      inactiveStatusValue: 'pending',
+      statusField: 'status',
+      updateUrl: '/api/project-stages/{stage_id}',
+      updateMethod: 'PATCH',
+      updateKey: 'status'
+    }
+  }
+}
+```
+
+**Toggle Features:**
+- **Interactive Management**: Click stages to enable/disable with visual feedback
+- **API Integration**: Configurable endpoints with URL placeholders and CSRF protection
+- **Toast Notifications**: Real-time success/error feedback
+- **Auto-Refresh**: Grid data refreshes after successful stage updates
+- **Mixed Interactions**: StageCounter supports both stage toggling and container navigation
+
 ## DropZone Component Enhancements (v5.14.0+)
 
 ### Smart Data Extraction

package/package.json

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

package/src/components/Field.jsx

@@ -65,6 +65,9 @@ function Field({
     onChangeTableRadio,
     onChangeAddTableTextRow,
     onChangeTableText,
+    onChangeJsonTable,
+    onAddJsonTableRow,
+    onDeleteJsonTableRow,
     onChangeToggle,
     onFileDownload,
     setFormData,
@@ -1409,6 +1412,387 @@ function Field({
                         autoComplete="off"
                     />
                 );
+            case 'json-table':
+                // Parse JSON value to get table data
+                let jsonTableData = [];
+                let jsonTableError = null;
+                
+                try {
+                    if (inputValue && inputValue !== 'null' && inputValue !== '') {
+                        const parsedValue = typeof inputValue === 'string' ? JSON.parse(inputValue) : inputValue;
+                        
+                        // Handle jsonPath setting to extract nested data
+                        if (settings.jsonPath && parsedValue[settings.jsonPath]) {
+                            jsonTableData = Array.isArray(parsedValue[settings.jsonPath]) 
+                                ? parsedValue[settings.jsonPath] 
+                                : [];
+                        } else if (Array.isArray(parsedValue)) {
+                            jsonTableData = parsedValue;
+                        } else if (typeof parsedValue === 'object' && parsedValue !== null) {
+                            // If it's an object but not an array, convert to single row
+                            jsonTableData = [parsedValue];
+                        }
+                    }
+                } catch (e) {
+                    jsonTableError = 'Invalid JSON format';
+                    jsonTableData = [];
+                }
+
+                // Ensure minimum rows
+                const minRows = settings.validation?.minRows || settings.minRows || 0;
+                while (jsonTableData.length < minRows) {
+                    jsonTableData.push(settings.defaultRow || {});
+                }
+
+                // Custom validation for JSON table
+                const validateJsonTable = (data, validationConfig) => {
+                    if (!validationConfig || !validationConfig.customValidation) {
+                        return { isValid: true, errors: [] };
+                    }
+
+                    const { type, startTimeField, endTimeField, message } = validationConfig.customValidation;
+                    const errors = [];
+
+                    if (type === '24hour_coverage') {
+                        // Convert time strings to minutes for easier calculation
+                        const timeToMinutes = (timeStr) => {
+                            if (!timeStr) return null;
+                            const [hours, minutes] = timeStr.split(':').map(Number);
+                            return hours * 60 + minutes;
+                        };
+
+                        // Sort intervals by start time
+                        const sortedIntervals = [...data].sort((a, b) => {
+                            const aStart = timeToMinutes(a[startTimeField]);
+                            const bStart = timeToMinutes(b[startTimeField]);
+                            return aStart - bStart;
+                        });
+
+                        let totalCoverage = 0;
+                        let previousEnd = null;
+
+                        for (let i = 0; i < sortedIntervals.length; i++) {
+                            const interval = sortedIntervals[i];
+                            const startMinutes = timeToMinutes(interval[startTimeField]);
+                            const endMinutes = timeToMinutes(interval[endTimeField]);
+
+                            if (startMinutes === null || endMinutes === null) {
+                                errors.push(`Interval ${i + 1}: Missing start or end time`);
+                                continue;
+                            }
+
+                            // Handle cross-midnight intervals (e.g., 18:00 to 06:00)
+                            let duration;
+                            if (endMinutes <= startMinutes) {
+                                // Cross-midnight: add 24 hours to end time
+                                duration = (endMinutes + 1440) - startMinutes;
+                            } else {
+                                duration = endMinutes - startMinutes;
+                            }
+
+                            totalCoverage += duration;
+
+                            // Check for gaps (except for the first interval)
+                            if (previousEnd !== null && startMinutes !== previousEnd) {
+                                // Allow for cross-midnight transitions
+                                const gapSize = startMinutes > previousEnd 
+                                    ? startMinutes - previousEnd 
+                                    : (startMinutes + 1440) - previousEnd;
+                                
+                                if (gapSize > 0 && gapSize < 1440) { // Don't count full day gaps as errors
+                                    errors.push(`Gap detected between intervals: ${Math.floor(gapSize / 60)}h ${gapSize % 60}m`);
+                                }
+                            }
+
+                            // Update previousEnd, handling cross-midnight
+                            previousEnd = endMinutes <= startMinutes ? endMinutes + 1440 : endMinutes;
+                            if (previousEnd >= 1440) previousEnd -= 1440; // Normalize back to 0-1439
+                        }
+
+                        // Check if total coverage equals 24 hours (1440 minutes)
+                        if (Math.abs(totalCoverage - 1440) > 1) { // Allow 1 minute tolerance
+                            errors.push(`Total coverage is ${Math.floor(totalCoverage / 60)}h ${totalCoverage % 60}m. Required: 24h 0m`);
+                        }
+
+                        // Check for overlaps
+                        for (let i = 0; i < sortedIntervals.length - 1; i++) {
+                            const current = sortedIntervals[i];
+                            const next = sortedIntervals[i + 1];
+                            
+                            const currentStart = timeToMinutes(current[startTimeField]);
+                            const currentEnd = timeToMinutes(current[endTimeField]);
+                            const nextStart = timeToMinutes(next[startTimeField]);
+                            
+                            // Handle normal and cross-midnight intervals
+                            const currentActualEnd = currentEnd <= currentStart ? currentEnd + 1440 : currentEnd;
+                            const nextActualStart = nextStart;
+                            
+                            if (currentActualEnd > nextActualStart && currentActualEnd < nextActualStart + 1440) {
+                                const overlapMinutes = currentActualEnd - nextActualStart;
+                                errors.push(`Overlap detected: ${Math.floor(overlapMinutes / 60)}h ${overlapMinutes % 60}m between intervals ${i + 1} and ${i + 2}`);
+                            }
+                        }
+                    }
+
+                    return {
+                        isValid: errors.length === 0,
+                        errors: errors.length > 0 ? [message, ...errors] : []
+                    };
+                };
+
+                // Perform validation
+                const validationResult = validateJsonTable(jsonTableData, settings.validation);
+                const hasValidationErrors = !validationResult.isValid;
+
+                // Render JSON table field
+                const renderJsonTableField = (column, cellValue, rowIndex, columnIndex) => {
+                    const fieldSettings = {
+                        ...column,
+                        id: `${settings.id}_${rowIndex}_${column.id}`,
+                        parent: settings.id
+                    };
+
+                    switch (column.type) {
+                        case 'checkbox':
+                            return (
+                                <div className={styles.fi__checkboxcontainer}>
+                                    <input
+                                        type="checkbox"
+                                        checked={cellValue || false}
+                                        data-id={settings.id}
+                                        className={styles.fi__customcheckbox}
+                                        onChange={(e) => 
+                                            onChangeJsonTable && onChangeJsonTable(e, rowIndex, column.id, 'checkbox')
+                                        }
+                                    />
+                                </div>
+                            );
+                        case 'html5_date':
+                            return (
+                                <input
+                                    type="date"
+                                    value={cellValue || ''}
+                                    data-id={settings.id}
+                                    className={styles.jsonTableInput}
+                                    onChange={(e) => 
+                                        onChangeJsonTable && onChangeJsonTable(e, rowIndex, column.id, 'date')
+                                    }
+                                />
+                            );
+                        case 'html5_time':
+                            return (
+                                <input
+                                    type="time"
+                                    value={cellValue || ''}
+                                    data-id={settings.id}
+                                    className={styles.jsonTableInput}
+                                    onChange={(e) => 
+                                        onChangeJsonTable && onChangeJsonTable(e, rowIndex, column.id, 'time')
+                                    }
+                                />
+                            );
+                        case 'html5_datetime':
+                            return (
+                                <input
+                                    type="datetime-local"
+                                    value={cellValue || ''}
+                                    data-id={settings.id}
+                                    className={styles.jsonTableInput}
+                                    onChange={(e) => 
+                                        onChangeJsonTable && onChangeJsonTable(e, rowIndex, column.id, 'datetime')
+                                    }
+                                />
+                            );
+                        case 'number':
+                        case 'decimal':
+                            // Special handling for interval numbers - make them auto-generated and read-only
+                            if (column.id === 'number' || column.autoGenerate) {
+                                return (
+                                    <div className={styles.jsonTableDisplay}>
+                                        {rowIndex + 1}
+                                    </div>
+                                );
+                            }
+                            
+                            return (
+                                <input
+                                    type="number"
+                                    value={cellValue || ''}
+                                    min={column.min}
+                                    max={column.max}
+                                    step={column.type === 'decimal' ? '0.01' : '1'}
+                                    data-id={settings.id}
+                                    className={styles.jsonTableInput}
+                                    onChange={(e) => 
+                                        onChangeJsonTable && onChangeJsonTable(e, rowIndex, column.id, 'number')
+                                    }
+                                />
+                            );
+                        case 'textarea':
+                            return (
+                                <textarea
+                                    value={cellValue || ''}
+                                    placeholder={column.placeholder || ''}
+                                    data-id={settings.id}
+                                    className={styles.jsonTableTextarea}
+                                    onChange={(e) => 
+                                        onChangeJsonTable && onChangeJsonTable(e, rowIndex, column.id, 'textarea')
+                                    }
+                                    rows={column.rows || 3}
+                                />
+                            );
+                        case 'toggle':
+                            return (
+                                <div style={{ display: 'flex', justifyContent: 'center' }}>
+                                    <Toggle
+                                        checked={cellValue || false}
+                                        onChange={(e) => 
+                                            onChangeJsonTable && onChangeJsonTable(e, rowIndex, column.id, 'toggle')
+                                        }
+                                    />
+                                </div>
+                            );
+                        case 'text':
+                        default:
+                            return (
+                                <input
+                                    type="text"
+                                    value={cellValue || ''}
+                                    placeholder={column.placeholder || ''}
+                                    data-id={settings.id}
+                                    className={styles.jsonTableInput}
+                                    onChange={(e) => 
+                                        onChangeJsonTable && onChangeJsonTable(e, rowIndex, column.id, 'text')
+                                    }
+                                />
+                            );
+                    }
+                };
+
+                return (
+                    <div>
+                        {settings.label && (
+                            <div className={styles.jsonTableLabel} style={{
+                                marginBottom: '0.75rem',
+                                fontWeight: '500',
+                                fontSize: '0.9rem',
+                                color: 'var(--paragraph-color)',
+                                display: 'flex',
+                                alignItems: 'center'
+                            }}>
+                                {settings.label}
+                                {settings.required && (
+                                    <span style={{ 
+                                        color: 'var(--danger-color, #dc3545)',
+                                        marginLeft: '3px'
+                                    }}>
+                                        *
+                                    </span>
+                                )}
+                            </div>
+                        )}
+                        <div className={styles.jsonTableContainer}>
+                        {jsonTableError && (
+                            <div className={styles.jsonTableError} style={{ 
+                                color: 'var(--danger-color, #dc3545)', 
+                                marginBottom: '10px',
+                                padding: '8px 12px',
+                                backgroundColor: 'var(--danger-bg, #f8d7da)',
+                                border: '1px solid var(--danger-border, #f5c6cb)',
+                                borderRadius: 'var(--br, 4px)',
+                                fontSize: '0.875rem'
+                            }}>
+                                <strong>Invalid JSON:</strong> {jsonTableError}
+                            </div>
+                        )}
+                        
+                        <div className={styles.jsonTableWrapper}>
+                            <table className={styles.jsonTable}>
+                                <thead>
+                                    <tr>
+                                        {settings.columns?.map((column, index) => (
+                                            <th key={index} style={{ 
+                                                width: column.width || 'auto',
+                                                minWidth: column.minWidth || 'auto'
+                                            }}>
+                                                {column.label}
+                                                {column.required && (
+                                                    <span style={{ 
+                                                        color: 'var(--danger-color, #dc3545)',
+                                                        marginLeft: '3px'
+                                                    }}>
+                                                        *
+                                                    </span>
+                                                )}
+                                            </th>
+                                        ))}
+                                        {settings.deleteRowButton?.enabled !== false && (
+                                            <th className={styles.jsonTableActionsHeader}>
+                                                Actions
+                                            </th>
+                                        )}
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {jsonTableData.map((row, rowIndex) => (
+                                        <tr key={rowIndex}>
+                                            {settings.columns?.map((column, columnIndex) => (
+                                                <td key={columnIndex}>
+                                                    {renderJsonTableField(
+                                                        column, 
+                                                        row[column.id], 
+                                                        rowIndex, 
+                                                        columnIndex
+                                                    )}
+                                                </td>
+                                            ))}
+                                            {settings.deleteRowButton?.enabled !== false && (
+                                                <td className={styles.jsonTableActionsCell}>
+                                                    <button
+                                                        type="button"
+                                                        onClick={() => 
+                                                            onDeleteJsonTableRow && onDeleteJsonTableRow(rowIndex, settings.id)
+                                                        }
+                                                        className={styles.jsonTableDeleteBtn}
+                                                        title="Delete row"
+                                                    >
+                                                        <Trash2 size={14} />
+                                                    </button>
+                                                </td>
+                                            )}
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </table>
+                        </div>
+                        
+                        {settings.addRowButton?.enabled !== false && (
+                            <div className={styles.jsonTableActions}>
+                                <button
+                                    type="button"
+                                    onClick={() => 
+                                        onAddJsonTableRow && onAddJsonTableRow(settings.id, settings.defaultRow || {})
+                                    }
+                                    className={styles.jsonTableAddBtn}
+                                >
+                                    <CirclePlus size={16} />
+                                    <span>{settings.addRowButton?.label || 'Add Row'}</span>
+                                </button>
+                            </div>
+                        )}
+                        
+                        {hasValidationErrors && (
+                            <div className={styles.validationErrors}>
+                                {validationResult.errors.map((error, index) => (
+                                    <div key={index} className={styles.validationError}>
+                                        {error}
+                                    </div>
+                                ))}
+                            </div>
+                        )}
+                        </div>
+                    </div>
+                );
             case 'line-break':
                 return (
                     <div className={styles.formbreak}>
@@ -2246,6 +2630,7 @@ function Field({
                 'file',
                 'gallery',
                 'image',
+                'json-table',
                 'line-break',
                 'multi-dropdown',
                 'multi-dropdown-ajax',
@@ -2690,7 +3075,7 @@ function Field({
         <div className={formItemClass} style={formItemStyle} ref={containerRef}>
             <label
                 className={
-                    ['richeditor', 'textarea'].includes(settings.type)
+                    ['richeditor', 'textarea', 'json-table'].includes(settings.type)
                         ? ''
                         : styles.fi__label
                 }

package/src/components/Form.jsx

@@ -567,6 +567,188 @@ function Form({
         }
     };
 
+    // JSON Table handlers
+    const handleChangeJsonTable = (event, rowIndex, columnId, fieldType) => {
+        const fieldId = event.target.getAttribute('data-id');
+        let value = event.target.value;
+        
+        // Handle different field types
+        if (fieldType === 'checkbox' || fieldType === 'toggle') {
+            value = event.target.checked;
+        } else if (fieldType === 'number') {
+            value = parseFloat(value) || 0;
+        }
+
+        setFormData(prevData => {
+            const newData = { ...prevData };
+            
+            // Get the current JSON value for this field
+            let currentValue = newData[fieldId];
+            if (typeof currentValue === 'string') {
+                try {
+                    currentValue = JSON.parse(currentValue);
+                } catch (e) {
+                    currentValue = [];
+                }
+            }
+
+            // Find field configuration from form settings
+            let fieldConfig = null;
+            if (formSettings && formSettings.fields) {
+                fieldConfig = formSettings.fields.find(f => f.id === fieldId);
+            }
+
+            // Handle nested JSON path (e.g., intervals within galvanizing_intervals)
+            let tableData;
+            
+            if (fieldConfig && fieldConfig.jsonPath && currentValue[fieldConfig.jsonPath]) {
+                tableData = [...currentValue[fieldConfig.jsonPath]];
+            } else if (Array.isArray(currentValue)) {
+                tableData = [...currentValue];
+            } else {
+                tableData = [];
+            }
+
+            // Update the specific cell
+            if (tableData[rowIndex]) {
+                tableData[rowIndex] = {
+                    ...tableData[rowIndex],
+                    [columnId]: value
+                };
+            }
+
+            // Update the data structure
+            if (fieldConfig && fieldConfig.jsonPath) {
+                newData[fieldId] = {
+                    ...currentValue,
+                    [fieldConfig.jsonPath]: tableData
+                };
+            } else {
+                newData[fieldId] = tableData;
+            }
+
+            return newData;
+        });
+    };
+
+    const handleAddJsonTableRow = (fieldId, defaultRow = {}) => {
+        setFormData(prevData => {
+            const newData = { ...prevData };
+            let currentValue = newData[fieldId];
+            
+            if (typeof currentValue === 'string') {
+                try {
+                    currentValue = JSON.parse(currentValue);
+                } catch (e) {
+                    currentValue = [];
+                }
+            }
+
+            // Find field configuration from form settings
+            let fieldConfig = null;
+            if (formSettings && formSettings.fields) {
+                fieldConfig = formSettings.fields.find(f => f.id === fieldId);
+            }
+
+            let tableData;
+            
+            if (fieldConfig && fieldConfig.jsonPath && currentValue[fieldConfig.jsonPath]) {
+                tableData = [...currentValue[fieldConfig.jsonPath]];
+            } else if (Array.isArray(currentValue)) {
+                tableData = [...currentValue];
+            } else {
+                tableData = [];
+            }
+
+            // Add new row with auto-generated number
+            const newRow = {
+                ...defaultRow,
+                number: tableData.length + 1
+            };
+            tableData.push(newRow);
+
+            // Update the data structure
+            if (fieldConfig && fieldConfig.jsonPath) {
+                newData[fieldId] = {
+                    ...currentValue,
+                    [fieldConfig.jsonPath]: tableData
+                };
+            } else {
+                newData[fieldId] = tableData;
+            }
+
+            return newData;
+        });
+    };
+
+    const handleDeleteJsonTableRow = (rowIndex, fieldId) => {
+        confirmDialog({
+            title: 'Delete Interval',
+            message: 'Are you sure you want to delete this interval?',
+            buttons: [
+                {
+                    label: 'Yes',
+                    onClick: () => {
+                        setFormData(prevData => {
+                            const newData = { ...prevData };
+                            let currentValue = newData[fieldId];
+                            
+                            if (typeof currentValue === 'string') {
+                                try {
+                                    currentValue = JSON.parse(currentValue);
+                                } catch (e) {
+                                    currentValue = [];
+                                }
+                            }
+
+                            // Find field configuration from form settings
+                            let fieldConfig = null;
+                            if (formSettings && formSettings.fields) {
+                                fieldConfig = formSettings.fields.find(f => f.id === fieldId);
+                            }
+
+                            let tableData;
+                            
+                            if (fieldConfig && fieldConfig.jsonPath && currentValue[fieldConfig.jsonPath]) {
+                                tableData = [...currentValue[fieldConfig.jsonPath]];
+                            } else if (Array.isArray(currentValue)) {
+                                tableData = [...currentValue];
+                            } else {
+                                tableData = [];
+                            }
+
+                            // Remove row
+                            tableData.splice(rowIndex, 1);
+
+                            // Re-number the remaining rows
+                            tableData.forEach((row, index) => {
+                                row.number = index + 1;
+                            });
+
+                            // Update the data structure
+                            if (fieldConfig && fieldConfig.jsonPath) {
+                                newData[fieldId] = {
+                                    ...currentValue,
+                                    [fieldConfig.jsonPath]: tableData
+                                };
+                            } else {
+                                newData[fieldId] = tableData;
+                            }
+
+                            return newData;
+                        });
+                    }
+                },
+                {
+                    label: 'No',
+                    onClick: () => {
+                        // User cancelled - do nothing
+                    }
+                }
+            ]
+        });
+    };
+
     const autocompleteSelect = (place, id) => {
         const { address, text, context } = place;
 
@@ -995,6 +1177,132 @@ function Form({
                 // Update the form data state with the auto values
                 setFormData(updatedFormData);
 
+                // Custom validation for json-table fields
+                fields.forEach((item) => {
+                    if (item.type === 'json-table' && item.validation?.customValidation) {
+                        try {
+                            let jsonTableData = [];
+                            const fieldValue = formData[item.id];
+                            
+                            if (fieldValue && fieldValue !== 'null' && fieldValue !== '') {
+                                const parsedValue = typeof fieldValue === 'string' ? JSON.parse(fieldValue) : fieldValue;
+                                
+                                // Handle jsonPath setting to extract nested data
+                                if (item.jsonPath && parsedValue[item.jsonPath]) {
+                                    jsonTableData = Array.isArray(parsedValue[item.jsonPath]) 
+                                        ? parsedValue[item.jsonPath] 
+                                        : [];
+                                } else if (Array.isArray(parsedValue)) {
+                                    jsonTableData = parsedValue;
+                                } else if (typeof parsedValue === 'object' && parsedValue !== null) {
+                                    jsonTableData = [parsedValue];
+                                }
+                            }
+                            
+                            // Perform validation using the same logic as in Field.jsx
+                            const validateJsonTable = (data, validationConfig) => {
+                                if (!validationConfig || !validationConfig.customValidation) {
+                                    return { isValid: true, errors: [] };
+                                }
+                                const { type, startTimeField, endTimeField, message } = validationConfig.customValidation;
+                                const errors = [];
+                                
+                                if (type === '24hour_coverage') {
+                                    // Convert time strings to minutes for easier calculation
+                                    const timeToMinutes = (timeStr) => {
+                                        if (!timeStr) return null;
+                                        const [hours, minutes] = timeStr.split(':').map(Number);
+                                        return hours * 60 + minutes;
+                                    };
+                                    
+                                    // Sort intervals by start time
+                                    const sortedIntervals = [...data].sort((a, b) => {
+                                        const aStart = timeToMinutes(a[startTimeField]);
+                                        const bStart = timeToMinutes(b[startTimeField]);
+                                        return aStart - bStart;
+                                    });
+                                    
+                                    let totalCoverage = 0;
+                                    let previousEnd = null;
+                                    
+                                    for (let i = 0; i < sortedIntervals.length; i++) {
+                                        const interval = sortedIntervals[i];
+                                        const startMinutes = timeToMinutes(interval[startTimeField]);
+                                        const endMinutes = timeToMinutes(interval[endTimeField]);
+                                        
+                                        if (startMinutes === null || endMinutes === null) {
+                                            errors.push(`Interval ${i + 1}: Missing start or end time`);
+                                            continue;
+                                        }
+                                        
+                                        // Handle cross-midnight intervals (e.g., 18:00 to 06:00)
+                                        let duration;
+                                        if (endMinutes <= startMinutes) {
+                                            duration = (endMinutes + 1440) - startMinutes;
+                                        } else {
+                                            duration = endMinutes - startMinutes;
+                                        }
+                                        
+                                        totalCoverage += duration;
+                                        
+                                        // Check for gaps (except for the first interval)
+                                        if (previousEnd !== null && startMinutes !== previousEnd) {
+                                            const gapSize = startMinutes > previousEnd 
+                                                ? startMinutes - previousEnd 
+                                                : (startMinutes + 1440) - previousEnd;
+                                            
+                                            if (gapSize > 0 && gapSize < 1440) {
+                                                errors.push(`Gap detected between intervals: ${Math.floor(gapSize / 60)}h ${gapSize % 60}m`);
+                                            }
+                                        }
+                                        
+                                        // Update previousEnd, handling cross-midnight
+                                        previousEnd = endMinutes <= startMinutes ? endMinutes + 1440 : endMinutes;
+                                        if (previousEnd >= 1440) previousEnd -= 1440;
+                                    }
+                                    
+                                    // Check if total coverage equals 24 hours (1440 minutes)
+                                    if (Math.abs(totalCoverage - 1440) > 1) {
+                                        errors.push(`Total coverage is ${Math.floor(totalCoverage / 60)}h ${totalCoverage % 60}m. Required: 24h 0m`);
+                                    }
+                                    
+                                    // Check for overlaps
+                                    for (let i = 0; i < sortedIntervals.length - 1; i++) {
+                                        const current = sortedIntervals[i];
+                                        const next = sortedIntervals[i + 1];
+                                        
+                                        const currentStart = timeToMinutes(current[startTimeField]);
+                                        const currentEnd = timeToMinutes(current[endTimeField]);
+                                        const nextStart = timeToMinutes(next[startTimeField]);
+                                        
+                                        const currentActualEnd = currentEnd <= currentStart ? currentEnd + 1440 : currentEnd;
+                                        const nextActualStart = nextStart;
+                                        
+                                        if (currentActualEnd > nextActualStart && currentActualEnd < nextActualStart + 1440) {
+                                            const overlapMinutes = currentActualEnd - nextActualStart;
+                                            errors.push(`Overlap detected: ${Math.floor(overlapMinutes / 60)}h ${overlapMinutes % 60}m between intervals ${i + 1} and ${i + 2}`);
+                                        }
+                                    }
+                                }
+                                
+                                return {
+                                    isValid: errors.length === 0,
+                                    errors: errors.length > 0 ? [message, ...errors] : []
+                                };
+                            };
+                            
+                            const validationResult = validateJsonTable(jsonTableData, item.validation);
+                            if (!validationResult.isValid) {
+                                validation += `${item.label}: ${validationResult.errors.join(', ')}<br/>`;
+                                _inputClass[item.id] = styles.inputError;
+                            }
+                        } catch (e) {
+                            validation += `${item.label}: Invalid configuration data<br/>`;
+                            _inputClass[item.id] = styles.inputError;
+                        }
+                    }
+                });
+
                 if (validation) {
                     toast.error(<div>{parse(validation)}</div>);
                 } else {
@@ -1856,6 +2164,9 @@ function Form({
                                             handleChangeSignature
                                         }
                                         onChangeToggle={handleChangeToggle}
+                                        onChangeJsonTable={handleChangeJsonTable}
+                                        onAddJsonTableRow={handleAddJsonTableRow}
+                                        onDeleteJsonTableRow={handleDeleteJsonTableRow}
                                         onFileDownload={handleFileDownload}
                                         settings={item}
                                         setFormData={setFormData}
@@ -2498,6 +2809,9 @@ function Form({
                                             }
                                             onChangeSelect={handleChangeSelect}
                                             onChangeToggle={handleChangeToggle}
+                                            onChangeJsonTable={handleChangeJsonTable}
+                                            onAddJsonTableRow={handleAddJsonTableRow}
+                                            onDeleteJsonTableRow={handleDeleteJsonTableRow}
                                             onFileDownload={handleFileDownload}
                                             settings={item}
                                             setFormData={setFormData}

package/src/components/styles/Field.module.scss

@@ -1385,6 +1385,268 @@ input[type='file']:hover {
     box-shadow: none; /* Match react-select no-shadow pattern */
 }
 
+/* JSON Table Field Styles */
+.jsonTableLabel {
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+    font-size: 0.875rem;
+    color: var(--paragraph-color);
+    display: flex;
+    align-items: center;
+    line-height: 1.3;
+}
+
+.jsonTableContainer {
+    width: 100%;
+    border: 1px solid var(--border-color, #dee2e6);
+    border-radius: var(--br, 4px);
+    background: var(--item-color, #fff);
+    overflow: hidden;
+    margin-bottom: 0.75rem;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.jsonTableWrapper {
+    overflow-x: auto;
+}
+
+.jsonTable {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.8rem;
+    background: var(--item-color, #fff);
+    margin: 0 auto;
+    border: none;
+    border-spacing: 0;
+    box-sizing: border-box;
+}
+
+.jsonTable thead {
+    display: table-row-group;
+}
+
+.jsonTable th {
+    background: var(--tertiary-color, #f8f9fa);
+    color: var(--paragraph-color, #495057);
+    font-weight: 600;
+    padding: 0.5rem 0.75rem;
+    text-align: left;
+    border-bottom: 1px solid var(--border-color, #dee2e6);
+    border-right: 1px solid var(--border-color, #dee2e6);
+    font-size: 0.75rem;
+    line-height: 1.2;
+    letter-spacing: 0.01em;
+    text-transform: uppercase;
+    border-spacing: 0;
+    border-collapse: collapse;
+}
+
+.jsonTable th:last-child {
+    border-right: none;
+}
+
+.jsonTable td {
+    padding: 0.4rem 0.75rem;
+    border-bottom: 1px solid var(--table-border, #dee2e6);
+    border-right: 1px solid var(--table-border, #dee2e6);
+    vertical-align: middle;
+    background: var(--item-color, #fff);
+    line-height: 1;
+    border-spacing: 0;
+    border-collapse: collapse;
+}
+
+.jsonTable td:last-child {
+    border-right: none;
+}
+
+.jsonTable tbody tr:nth-child(even) td {
+    background: rgba(var(--border-color-rgb, 222, 226, 230), 0.3);
+}
+
+.jsonTable tbody tr:hover td {
+    background: rgba(var(--primary-color-rgb, 0, 123, 255), 0.03);
+}
+
+.jsonTableInput {
+    width: 100%;
+    padding: 0.375rem 0.5rem;
+    border: 1px solid var(--border-color, #dee2e6);
+    border-radius: calc(var(--br, 4px) - 1px);
+    background: var(--item-color, #fff);
+    color: var(--paragraph-color);
+    font-size: 0.8rem;
+    line-height: 1.3;
+    transition: border-color 0.15s ease;
+    box-sizing: border-box;
+    min-height: 1.8rem;
+}
+
+.jsonTableInput:focus {
+    outline: none;
+    border-color: var(--primary-color, #007bff);
+    background: var(--item-color, #fff);
+    box-shadow: 0 0 0 1px rgba(var(--primary-color-rgb, 0, 123, 255), 0.25);
+}
+
+.jsonTableInput:hover:not(:focus) {
+    border-color: var(--border-color, #ced4da);
+}
+
+.jsonTableTextarea {
+    width: 100%;
+    padding: 0.375rem 0.5rem;
+    border: 1px solid var(--border-color, #dee2e6);
+    border-radius: calc(var(--br, 4px) - 1px);
+    background: var(--item-color, #fff);
+    color: var(--paragraph-color);
+    font-size: 0.8rem;
+    line-height: 1.4;
+    transition: border-color 0.15s ease;
+    resize: vertical;
+    min-height: 2rem;
+    font-family: inherit;
+    box-sizing: border-box;
+}
+
+.jsonTableTextarea:focus {
+    outline: none;
+    border-color: var(--primary-color, #007bff);
+    background: var(--item-color, #fff);
+    box-shadow: 0 0 0 1px rgba(var(--primary-color-rgb, 0, 123, 255), 0.25);
+}
+
+.jsonTableTextarea:hover:not(:focus) {
+    border-color: var(--border-color, #ced4da);
+}
+
+.jsonTableDisplay {
+    padding: 0.5rem 0.375rem;
+    color: var(--paragraph-color);
+    font-size: 0.8rem;
+    font-weight: 500;
+    text-align: center;
+    background: var(--tertiary-color, #f8f9fa);
+    border-radius: calc(var(--br, 4px) - 1px);
+    border: 1px solid var(--border-color, #ced4da);
+    line-height: 1.3;
+    user-select: none;
+    min-height: 1.8rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+}
+
+.validationErrors {
+    margin-top: 0.75rem;
+    padding: 0.75rem;
+    border-radius: var(--br, 4px);
+    border: 1px solid var(--danger-color, #dc3545);
+    background: rgba(var(--danger-color-rgb, 220, 53, 69), 0.05);
+}
+
+.validationError {
+    color: var(--danger-color, #dc3545);
+    font-size: 0.875rem;
+    margin: 0 0 0.5rem 0;
+    font-weight: 500;
+    
+    &:last-child {
+        margin-bottom: 0;
+    }
+    
+    &:first-child {
+        font-weight: 600;
+        margin-bottom: 0.75rem;
+        padding-bottom: 0.5rem;
+        border-bottom: 1px solid rgba(var(--danger-color-rgb, 220, 53, 69), 0.2);
+    }
+}
+
+.jsonTableActions {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem;
+    border-top: 1px solid var(--border-color, #dee2e6);
+    background: var(--item-color, #fff);
+}
+
+.jsonTableDeleteBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0;
+    background: rgba(var(--danger-color-rgb, 220, 53, 69), 0.08);
+    border: 1px solid rgba(var(--danger-color-rgb, 220, 53, 69), 0.2);
+    border-radius: calc(var(--br, 4px) - 1px);
+    color: var(--danger-color, #dc3545);
+    cursor: pointer;
+    transition: all 0.15s ease;
+    font-size: 0.75rem;
+    line-height: 1;
+}
+
+.jsonTableDeleteBtn:hover {
+    background: var(--danger-color, #dc3545);
+    color: var(--secondary-color, #fff);
+    border-color: var(--danger-color, #dc3545);
+}
+
+.jsonTableDeleteBtn:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(var(--danger-color-rgb, 220, 53, 69), 0.25);
+}
+
+.jsonTableAddBtn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.375rem 0.75rem;
+    background: var(--primary-color, #007bff);
+    border: 1px solid var(--primary-color, #007bff);
+    border-radius: var(--br, 4px);
+    color: var(--secondary-color, #fff);
+    cursor: pointer;
+    transition: all 0.15s ease;
+    font-size: 0.75rem;
+    font-weight: 500;
+    text-decoration: none;
+    outline: none;
+}
+
+.jsonTableAddBtn:hover {
+    background: rgba(var(--primary-color-rgb, 0, 123, 255), 0.9);
+    border-color: rgba(var(--primary-color-rgb, 0, 123, 255), 0.9);
+}
+
+.jsonTableAddBtn:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb, 0, 123, 255), 0.25);
+}
+
+.jsonTableAddBtn svg {
+    width: 0.875rem;
+    height: 0.875rem;
+}
+
+.jsonTableActionsHeader {
+    width: 60px;
+    text-align: center;
+    white-space: nowrap;
+}
+
+.jsonTableActionsCell {
+    text-align: center;
+    vertical-align: middle;
+    width: 60px;
+    padding: 0.25rem !important;
+}
+
 /* Dark mode support */
 @media (prefers-color-scheme: dark) {
     .emailSuggestions {
@@ -1401,4 +1663,76 @@ input[type='file']:hover {
         background: var(--dark-primary-color, #3182ce);
         color: var(--dark-primary-text-color, #fff);
     }
+    
+    .jsonTableLabel {
+        color: var(--dark-text-color, #f9fafb);
+    }
+    
+    .jsonTableContainer {
+        background: var(--dark-item-color, #2d3748);
+        border-color: var(--dark-border-color, #4a5568);
+    }
+    
+    .jsonTable {
+        background: var(--dark-item-color, #2d3748);
+    }
+    
+    .jsonTable th {
+        background: var(--dark-tertiary-color, #374151);
+        color: var(--dark-text-color, #f9fafb);
+        border-bottom-color: var(--dark-table-border, #4a5568);
+        border-right-color: var(--dark-table-border, #4a5568);
+    }
+    
+    .jsonTable td {
+        border-bottom-color: var(--dark-table-border, #4a5568);
+        border-right-color: var(--dark-table-border, #4a5568);
+        background: var(--dark-item-color, #2d3748);
+    }
+    
+    .jsonTable tbody tr:nth-child(even) td {
+        background: var(--dark-tertiary-color, #374151);
+    }
+    
+    .jsonTable tbody tr:hover td {
+        background: rgba(var(--dark-table-color-rgb, 74, 85, 104), 0.15);
+    }
+    
+    .jsonTableInput,
+    .jsonTableTextarea {
+        background: var(--dark-tertiary-color, #374151);
+        border-color: var(--dark-border-color, #6b7280);
+        color: var(--dark-text-color, #f9fafb);
+    }
+    
+    .jsonTableInput:focus,
+    .jsonTableTextarea:focus {
+        border-color: var(--dark-primary-color, #3182ce);
+        box-shadow: 0 0 0 2px rgba(var(--dark-primary-color-rgb, 49, 130, 206), 0.15);
+    }
+    
+    .jsonTableInput:hover:not(:focus),
+    .jsonTableTextarea:hover:not(:focus) {
+        border-color: var(--dark-text-color, #e2e8f0);
+    }
+    
+    .jsonTableDisplay {
+        background: var(--dark-tertiary-color, #374151);
+        border-color: var(--dark-border-color, #6b7280);
+        color: var(--dark-text-color, #f9fafb);
+    }
+    
+    .jsonTableActions {
+        background: var(--dark-tertiary-color, #374151);
+        border-top-color: var(--dark-table-border, #4a5568);
+    }
+    
+    .validationErrors {
+        background: rgba(var(--danger-color-rgb, 220, 53, 69), 0.15);
+        border-color: var(--danger-color, #dc3545);
+    }
+    
+    .validationError {
+        color: var(--danger-color, #dc3545);
+    }
 }