@visns-studio/visns-components 5.14.10 → 5.14.12

package/src/components/generic/StandardModal.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import Popup from 'reactjs-popup';
 import { X } from 'lucide-react';
 import formStyles from '../styles/Form.module.scss';
@@ -33,6 +33,40 @@ const StandardModal = ({
     showHeader = false,
     customStyles = {}
 }) => {
+    // Device detection state
+    const [windowWidth, setWindowWidth] = useState(typeof window !== 'undefined' ? window.innerWidth : 1024);
+    
+    // Device detection utility
+    const getDeviceType = () => {
+        const hasTouch = typeof window !== 'undefined' && ('ontouchstart' in window || navigator.maxTouchPoints > 0);
+        const userAgent = typeof window !== 'undefined' ? navigator.userAgent : '';
+        
+        // Mobile detection: width + user agent + touch
+        const isMobileUA = /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
+        const isMobileWidth = windowWidth <= 768;
+        const isMobile = isMobileUA || (isMobileWidth && hasTouch);
+        
+        // Tablet detection: iPad or Android tablets or medium width with touch
+        const isTabletUA = /iPad|Android(?!.*Mobile)/i.test(userAgent);
+        const isTabletWidth = windowWidth > 768 && windowWidth <= 1024;
+        const isTablet = isTabletUA || (isTabletWidth && hasTouch && !isMobile);
+        
+        return { isMobile, isTablet, isDesktop: !isMobile && !isTablet };
+    };
+    
+    const { isMobile, isTablet } = getDeviceType();
+    
+    // Handle window resize
+    useEffect(() => {
+        if (typeof window === 'undefined') return;
+        
+        const handleResize = () => {
+            setWindowWidth(window.innerWidth);
+        };
+        
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
     // Apply vertical alignment class if needed
     const getModalClasses = () => {
         let classes = formStyles.modal;
@@ -42,36 +76,52 @@ const StandardModal = ({
         return classes;
     };
 
-    // Get size-based styles for the popup content
+    // Get size-based styles for the popup content with device-aware positioning
     const getContentStyle = () => {
         const baseStyle = {
             ...customStyles.modal
         };
 
-        // Apply size-based styles
+        // Device-specific positioning for virtual keyboard accommodation
+        let positioningStyle = {};
+        if (isMobile || isTablet) {
+            // Position modal higher on mobile/tablet to accommodate virtual keyboard
+            positioningStyle = {
+                top: '5%', // Position higher (5% from top)
+                left: '50%', // Center horizontally
+                transform: 'translateX(-50%)', // Only center horizontally, no vertical transform
+                maxHeight: '85vh', // Limit height to prevent overflow
+                overflowY: 'auto', // Allow scrolling within modal if needed
+                position: 'fixed' // Ensure fixed positioning for proper centering
+            };
+        }
+
+        // Apply size-based styles with device considerations
         switch (size) {
             case 'small':
                 return {
                     ...baseStyle,
-                    width: '400px',
-                    minWidth: '400px',
-                    maxWidth: '600px'
+                    ...positioningStyle,
+                    width: isMobile ? '95vw' : '400px',
+                    minWidth: isMobile ? '300px' : '400px',
+                    maxWidth: isMobile ? '95vw' : '600px'
                 };
             case 'large':
                 return {
                     ...baseStyle,
+                    ...positioningStyle,
                     width: '95vw',
-                    minWidth: '800px',
-                    maxWidth: '1600px'
+                    minWidth: isMobile ? '300px' : '800px',
+                    maxWidth: isMobile ? '95vw' : '1600px'
                 };
             case 'medium':
             default:
-                // Use the same dimensions as modalWide class (original modal sizing)
                 return {
                     ...baseStyle,
-                    width: '90vw',
-                    minWidth: '600px',
-                    maxWidth: '1400px'
+                    ...positioningStyle,
+                    width: isMobile ? '95vw' : '90vw',
+                    minWidth: isMobile ? '300px' : '600px',
+                    maxWidth: isMobile ? '95vw' : '1400px'
                 };
         }
     };

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

@@ -2,6 +2,132 @@ import parse from 'html-react-parser';
 import moment from 'moment';
 import numeral from 'numeral';
 
+/**
+ * Smart boolean/binary value interpreter based on column name and context
+ * @param {string|number} value - The value (0/1, true/false, etc.)
+ * @param {Object} column - Column configuration with id/name
+ * @returns {string} Human-friendly representation
+ */
+const interpretBooleanValue = (value, column) => {
+    const columnName = (column.id || column.name || '').toLowerCase();
+    const isTrue = value === 1 || value === true || value === 'true' || value === 'yes' || value === 'Yes';
+    const isFalse = value === 0 || value === false || value === 'false' || value === 'no' || value === 'No';
+    
+    if (!isTrue && !isFalse) return value; // Return original if not clearly boolean
+    
+    // Contextual interpretations based on column name patterns
+    const interpretations = {
+        // Status/State patterns
+        'active': { true: 'Active', false: 'Inactive' },
+        'enabled': { true: 'Enabled', false: 'Disabled' },
+        'status': { true: 'Active', false: 'Inactive' },
+        'visible': { true: 'Visible', false: 'Hidden' },
+        'published': { true: 'Published', false: 'Draft' },
+        'public': { true: 'Public', false: 'Private' },
+        'live': { true: 'Live', false: 'Offline' },
+        
+        // Completion/Progress patterns
+        'completed': { true: 'Completed', false: 'Pending' },
+        'finished': { true: 'Finished', false: 'In Progress' },
+        'done': { true: 'Done', false: 'To Do' },
+        'complete': { true: 'Complete', false: 'Incomplete' },
+        'resolved': { true: 'Resolved', false: 'Open' },
+        'closed': { true: 'Closed', false: 'Open' },
+        
+        // Approval/Verification patterns
+        'approved': { true: 'Approved', false: 'Pending' },
+        'verified': { true: 'Verified', false: 'Unverified' },
+        'confirmed': { true: 'Confirmed', false: 'Unconfirmed' },
+        'accepted': { true: 'Accepted', false: 'Rejected' },
+        'valid': { true: 'Valid', false: 'Invalid' },
+        
+        // Access/Permission patterns
+        'allowed': { true: 'Allowed', false: 'Denied' },
+        'permitted': { true: 'Permitted', false: 'Restricted' },
+        'authorized': { true: 'Authorized', false: 'Unauthorized' },
+        'locked': { true: 'Locked', false: 'Unlocked' },
+        
+        // Notification/Communication patterns
+        'sent': { true: 'Sent', false: 'Not Sent' },
+        'delivered': { true: 'Delivered', false: 'Pending' },
+        'read': { true: 'Read', false: 'Unread' },
+        'notified': { true: 'Notified', false: 'Not Notified' },
+        
+        // Business/Financial patterns
+        'paid': { true: 'Paid', false: 'Unpaid' },
+        'invoiced': { true: 'Invoiced', false: 'Not Invoiced' },
+        'billed': { true: 'Billed', false: 'Unbilled' },
+        'taxable': { true: 'Taxable', false: 'Tax Free' },
+        
+        // Quality/Condition patterns
+        'available': { true: 'Available', false: 'Unavailable' },
+        'ready': { true: 'Ready', false: 'Not Ready' },
+        'urgent': { true: 'Urgent', false: 'Normal' },
+        'priority': { true: 'High Priority', false: 'Normal Priority' },
+        'critical': { true: 'Critical', false: 'Normal' },
+        
+        // Agreement/Contract patterns
+        'signed': { true: 'Signed', false: 'Unsigned' },
+        'executed': { true: 'Executed', false: 'Draft' },
+        'expired': { true: 'Expired', false: 'Current' },
+        
+        // Project/Work patterns
+        'assigned': { true: 'Assigned', false: 'Unassigned' },
+        'allocated': { true: 'Allocated', false: 'Available' },
+        'booked': { true: 'Booked', false: 'Available' },
+        'scheduled': { true: 'Scheduled', false: 'Unscheduled' },
+        'stage': { true: 'Completed', false: 'Pending' },
+        'final': { true: 'Completed', false: 'Incomplete' },
+        'finished': { true: 'Finished', false: 'In Progress' },
+        'done': { true: 'Done', false: 'To Do' },
+        
+        // System/Technical patterns
+        'online': { true: 'Online', false: 'Offline' },
+        'connected': { true: 'Connected', false: 'Disconnected' },
+        'synced': { true: 'Synced', false: 'Not Synced' },
+        'backup': { true: 'Backed Up', false: 'Not Backed Up' },
+    };
+    
+    // Try to find a match based on column name
+    for (const [pattern, values] of Object.entries(interpretations)) {
+        if (columnName.includes(pattern)) {
+            return isTrue ? values.true : values.false;
+        }
+    }
+    
+    // Special handling for specific common patterns
+    if (columnName.includes('is_') || columnName.startsWith('has_') || columnName.endsWith('_flag')) {
+        // Extract the meaningful part
+        const meaningfulPart = columnName
+            .replace(/^(is_|has_)/, '')
+            .replace(/_flag$/, '')
+            .replace(/_/g, ' ')
+            .replace(/\b\w/g, l => l.toUpperCase()); // Title case
+        
+        return isTrue ? meaningfulPart : `Not ${meaningfulPart}`;
+    }
+    
+    // Default fallback - still better than raw 0/1
+    return isTrue ? 'Yes' : 'No';
+};
+
+/**
+ * Auto-detect appropriate date format based on value content
+ * @param {*} value - The date value to analyze
+ * @param {string} fallbackFormat - Default format if detection fails
+ * @returns {string} Appropriate moment.js format string
+ */
+export const autoDetectDateFormat = (value, fallbackFormat = 'DD-MM-YYYY') => {
+    if (!value || !moment(value).isValid()) {
+        return fallbackFormat;
+    }
+    
+    const momentValue = moment(value);
+    const hasTime = momentValue.format('HH:mm:ss') !== '00:00:00';
+    
+    return hasTime ? 'DD-MM-YYYY HH:mm' : 'DD-MM-YYYY';
+};
+
 /**
  * Format quarter columns with status, contacts, and reasons in tooltips
  * @param {*} value - The date value
@@ -29,7 +155,7 @@ const formatQuarterWithStatus = (value, column, row) => {
     // If status is 'sent' and we have a date
     if (status === 'sent' && value) {
         const formattedDate = moment(value).isValid() 
-            ? moment(value).format('DD/MM/YYYY')
+            ? moment(value).format('DD-MM-YYYY')
             : value;
         
         const contactCount = Array.isArray(contacts) ? contacts.length : 0;
@@ -71,7 +197,7 @@ const formatQuarterWithStatus = (value, column, row) => {
     // If we have a date but no clear status (legacy data)
     if (value) {
         const formattedDate = moment(value).isValid() 
-            ? moment(value).format('DD/MM/YYYY')
+            ? moment(value).format('DD-MM-YYYY')
             : value;
         
         const contactCount = Array.isArray(contacts) ? contacts.length : 0;
@@ -125,11 +251,11 @@ export const formatCellContent = (value, column, row = null) => {
     switch (valueType) {
         case 'date':
             return moment(value).isValid()
-                ? moment(value).format(column.format || 'DD/MM/YYYY')
+                ? moment(value).format(column.format || autoDetectDateFormat(value, 'DD-MM-YYYY'))
                 : value;
         case 'datetime':
             return moment(value).isValid()
-                ? moment(value).format(column.format || 'DD/MM/YYYY HH:mm')
+                ? moment(value).format(column.format || autoDetectDateFormat(value, 'DD-MM-YYYY HH:mm'))
                 : value;
         case 'currency':
             return numeral(value).format(column.format || '$0,0.00');
@@ -139,25 +265,7 @@ export const formatCellContent = (value, column, row = null) => {
                 ? numeral(value).format(column.format || '0,0')
                 : value;
         case 'boolean':
-            if (
-                value === 1 ||
-                value === true ||
-                value === 'true' ||
-                value === 'yes' ||
-                value === 'Yes'
-            ) {
-                return 'Yes';
-            }
-            if (
-                value === 0 ||
-                value === false ||
-                value === 'false' ||
-                value === 'no' ||
-                value === 'No'
-            ) {
-                return 'No';
-            }
-            return value;
+            return interpretBooleanValue(value, column);
         case 'year':
             // Special handling for year values
             return value.toString();
@@ -174,6 +282,27 @@ export const formatCellContent = (value, column, row = null) => {
             // Parse rich text content
             return parse(String(value));
         default:
+            // Check if this might be a boolean value based on its content
+            if ((value === 0 || value === 1) && column.id) {
+                // Only apply smart boolean interpretation if the column name suggests it's boolean
+                const columnName = (column.id || column.name || '').toLowerCase();
+                const booleanIndicators = [
+                    'is_', 'has_', 'can_', 'should_', 'will_', 'did_',
+                    'active', 'enabled', 'completed', 'confirmed', 'approved', 'verified',
+                    'sent', 'delivered', 'paid', 'signed', 'expired', 'urgent', 'critical',
+                    'public', 'visible', 'available', 'ready', 'locked', 'online',
+                    '_flag', '_status', '_state'
+                ];
+                
+                const seemsBooleanish = booleanIndicators.some(indicator => 
+                    columnName.includes(indicator)
+                );
+                
+                if (seemsBooleanish) {
+                    return interpretBooleanValue(value, column);
+                }
+            }
+            
             // For text values, check if it contains HTML tags
             if (
                 typeof value === 'string' &&

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

@@ -845,66 +845,146 @@ input[type='file']:hover {
 .file-upload-container {
     display: flex;
     flex-direction: column;
-    gap: 0.5em;
+    gap: 1em;
     width: 100%;
+    border: 2px dashed var(--border-color, #ddd);
+    border-radius: var(--br, 8px);
+    padding: 1.5em;
+    background: var(--tertiary-color, #fafafa);
+    transition: all 0.3s ease;
+    position: relative;
 }
 
+/* Removed hover effect on main container */
+
 .file-upload-container input[type='file'] {
-    padding: 8px;
-    border: 1px solid var(--border-color);
-    border-radius: var(--br);
-    width: auto;
-    background: var(--tertiary-color);
+    position: absolute;
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    overflow: hidden;
+    z-index: -1;
+}
+
+.file-upload-button-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5em;
+    padding: 1em;
+    border: 2px dashed transparent;
+    border-radius: var(--br, 6px);
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+/* Removed hover effect on button wrapper */
+
+.file-upload-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5em;
+    padding: 0.75em 1.5em;
+    background: var(--primary-color, #007bff);
+    color: #ffffff;
+    border: none;
+    border-radius: var(--br, 6px);
+    font-weight: 500;
+    font-size: 0.9em;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 4px rgba(var(--primary-color-rgb, 0, 123, 255), 0.2);
+}
+
+.file-upload-button:hover {
+    background: rgba(var(--primary-color-rgb, 0, 123, 255), 0.9);
+    color: #ffffff;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(var(--primary-color-rgb, 0, 123, 255), 0.3);
+}
+
+.file-upload-help-text {
+    font-size: 0.85em;
+    color: var(--muted-text-color, #6c757d);
+    text-align: center;
+    margin-top: 0.5em;
 }
 
 .file-list {
     width: 100%;
-    border: 1px solid var(--border-color);
-    border-radius: var(--br);
-    background: var(--tertiary-color);
-    max-height: 200px;
+    background: transparent;
+    max-height: 220px;
     overflow-y: auto;
-    padding: 0.5em;
+    padding: 0;
+    margin-top: 0.75em;
+    display: flex;
+    flex-direction: column;
+    gap: 0.3em;
 }
 
 .file-list li {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 0.75em 1em;
-    border-bottom: 1px solid var(--border-color);
-    font-size: 0.9rem;
-    background: white;
-    border-radius: 5px;
-    transition: background 0.3s;
-    margin-bottom: 5px;
+    padding: 0.5em 0.75em;
+    background: var(--item-color, #fff);
+    border: 1px solid var(--border-color, #e0e6ed);
+    border-radius: var(--br, 6px);
+    font-size: 0.8rem;
+    transition: all 0.2s ease;
+    min-height: 36px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+    position: relative;
+    overflow: hidden;
 }
 
-.file-list li:last-child {
-    border-bottom: none;
+.file-list li:hover {
+    border-color: var(--primary-color, #007bff);
+    box-shadow: 0 2px 8px rgba(var(--primary-color-rgb, 0, 123, 255), 0.15);
+    transform: translateY(-1px);
 }
 
-.file-list li:hover {
-    background: rgba(var(--paragraph-color-rgb), 0.1);
+.file-list li:hover .file-icon {
+    background: rgba(var(--primary-color-rgb, 0, 123, 255), 0.15);
+    border-color: rgba(var(--primary-color-rgb, 0, 123, 255), 0.3);
+    transform: scale(1.05);
+}
+
+.file-list li:hover .file-image-preview {
+    transform: scale(1.05);
+}
+
+.file-list li:hover .file-name {
+    color: var(--primary-color, #007bff);
 }
 
 .trash-button {
-    background: transparent;
-    border: none;
+    background: rgba(var(--danger-color-rgb, 220, 53, 69), 0.08);
+    border: 1px solid rgba(var(--danger-color-rgb, 220, 53, 69), 0.2);
     cursor: pointer;
-    color: var(--primary-color);
+    color: var(--danger-color, #dc3545);
     display: flex;
     align-items: center;
-    transition: color 0.3s;
+    justify-content: center;
+    padding: 0.35em;
+    border-radius: 4px;
+    transition: all 0.2s ease;
+    min-width: 28px;
+    height: 28px;
+    flex-shrink: 0;
 }
 
 .trash-button:hover {
-    color: var(--secondary-color);
+    background: var(--danger-color, #dc3545);
+    color: var(--secondary-color, #fff);
+    border-color: var(--danger-color, #dc3545);
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(var(--danger-color-rgb, 220, 53, 69), 0.3);
 }
 
 .trash-button svg {
-    width: 1.2em;
-    height: 1.2em;
+    width: 0.9em;
+    height: 0.9em;
 }
 
 /* Enhanced File Upload Styling */
@@ -1034,15 +1114,16 @@ input[type='file']:hover {
 .file-list-item-image {
     display: flex;
     align-items: center;
-    gap: 0.75em;
-    padding: 0.75em 1em;
-    border-bottom: 1px solid var(--border-color, #e9ecef);
-    font-size: 0.9rem;
-    background: var(--item-color, #fff);
-    border-radius: var(--br, 6px);
-    transition: all 0.3s ease;
-    margin-bottom: 0.5em;
+    gap: 0.5em;
+    padding: 0.5em 0.75em;
+    border-bottom: 1px solid rgba(var(--border-color-rgb, 224, 230, 237), 0.3);
+    font-size: 0.85rem;
+    background: transparent;
+    border-radius: 4px;
+    transition: all 0.2s ease;
+    margin-bottom: 0.25em;
     border: 1px solid transparent;
+    min-height: 36px;
 }
 
 .file-list-item-image {
@@ -1063,23 +1144,37 @@ input[type='file']:hover {
     border-color: var(--success-color, #28a745);
 }
 
+/* Enhanced image file styling */
+.file-list-item-image .file-icon,
+.file-list-item-image .file-image-preview {
+    background: rgba(var(--success-color-rgb, 40, 167, 69), 0.12) !important;
+    border-color: rgba(var(--success-color-rgb, 40, 167, 69), 0.3) !important;
+}
+
 .file-icon {
-    font-size: 1.5em;
+    font-size: 1.1em;
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 2em;
-    height: 2em;
+    width: 1.8em;
+    height: 1.8em;
     flex-shrink: 0;
+    background: rgba(var(--primary-color-rgb, 0, 123, 255), 0.08);
+    border-radius: 4px;
+    border: 1px solid rgba(var(--primary-color-rgb, 0, 123, 255), 0.15);
+    transition: all 0.2s ease;
 }
 
 .file-name {
     flex: 1;
-    color: var(--paragraph-color, #495057);
+    color: var(--paragraph-color, #2c3e50);
     font-weight: 500;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    margin-left: 0.75em;
+    font-size: 0.85em;
+    line-height: 1.3;
 }
 
 /* Image Preview Styling */
@@ -1123,21 +1218,22 @@ input[type='file']:hover {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 3em;
-    height: 3em;
+    width: 1.8em;
+    height: 1.8em;
     flex-shrink: 0;
-    background: rgba(var(--item-color-rgb, 255, 255, 255), 0.9);
-    border: 1px solid var(--border-color, #e9ecef);
-    border-radius: var(--br, 4px);
+    background: rgba(var(--success-color-rgb, 40, 167, 69), 0.08);
+    border: 1px solid rgba(var(--success-color-rgb, 40, 167, 69), 0.2);
+    border-radius: 4px;
     overflow: hidden;
+    transition: all 0.2s ease;
 }
 
 .file-thumbnail {
     width: 100%;
     height: 100%;
     object-fit: cover;
-    border-radius: var(--br, 4px);
-    transition: transform 0.3s ease;
+    border-radius: 3px;
+    transition: transform 0.2s ease;
 }
 
 .file-thumbnail:hover {