@visns-studio/visns-components 5.14.22 → 5.15.1

package/README.md

@@ -9,10 +9,14 @@ 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)
+## Recent Updates (v5.15.1)
 
 ### Latest Enhancements
 
+- **Enhanced JSON Table Field**: Improved json-table field type with better styling, user experience, and data editing capabilities
+- **Dynamic Action Labels**: GenericDetail component now supports dynamic action labels and custom action buttons for better user interaction
+- **Dependency Updates**: Updated lucide-react to version 0.536.0 for improved icon consistency and performance
+- **GenericAuth Enhancements**: Additional config prop support for more flexible authentication configurations
 - **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

package/package.json

@@ -11,6 +11,7 @@
         "@nivo/core": "^0.99.0",
         "@nivo/line": "^0.99.0",
         "@nivo/pie": "^0.99.0",
+        "@tanstack/react-query": "^5.84.1",
         "@tinymce/miniature": "^6.0.0",
         "@tinymce/tinymce-react": "^6.3.0",
         "@uiw/react-color": "^2.7.3",
@@ -89,7 +90,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.14.22",
+    "version": "5.15.1",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/Fetch.jsx

@@ -1,9 +1,128 @@
 import React from 'react';
+import { QueryClient } from '@tanstack/react-query';
 import { trackPromise } from 'react-promise-tracker';
 import { toast } from 'react-toastify';
 import parse from 'html-react-parser';
 
-const CustomFetch = (
+// Create a singleton QueryClient instance for the entire visns-components ecosystem
+const createQueryClient = () => {
+    return new QueryClient({
+        defaultOptions: {
+            queries: {
+                staleTime: 2 * 60 * 1000, // 2 minutes - conservative setting
+                cacheTime: 10 * 60 * 1000, // 10 minutes - data stays in cache
+                retry: 1, // Conservative retry count
+                refetchOnWindowFocus: false, // Don't refetch on window focus
+                refetchOnReconnect: true, // Refetch when reconnecting to internet
+                retryOnMount: false, // Don't retry when component mounts
+            },
+        },
+    });
+};
+
+// Singleton QueryClient instance
+let queryClientInstance = null;
+const getQueryClient = () => {
+    if (!queryClientInstance) {
+        queryClientInstance = createQueryClient();
+    }
+    return queryClientInstance;
+};
+
+// Helper to generate consistent cache keys
+const generateCacheKey = (url, method, formData) => {
+    const normalizedMethod = method.toUpperCase();
+    const baseUrl = url.replace(/^\/+/, ''); // Remove leading slashes for consistency
+    
+    // For GET requests, include query params in URL part of cache key
+    if (normalizedMethod === 'GET' && formData && Object.keys(formData).length > 0) {
+        const params = new URLSearchParams();
+        Object.entries(formData).forEach(([key, value]) => {
+            if (value !== undefined && value !== null) {
+                params.append(key, value);
+            }
+        });
+        const queryString = params.toString();
+        return [baseUrl + (queryString ? `?${queryString}` : ''), normalizedMethod];
+    }
+    
+    // For other methods, include formData in cache key
+    const dataKey = formData ? JSON.stringify(formData) : '';
+    return [baseUrl, normalizedMethod, dataKey];
+};
+
+// Helper to determine if request should be cached
+const shouldCache = (method, url) => {
+    const normalizedMethod = method.toUpperCase();
+    
+    // Always cache GET requests
+    if (normalizedMethod === 'GET') return true;
+    
+    // Cache specific safe POST endpoints that return reference data
+    const cacheableEndpoints = [
+        '/dropdown',          // Dropdown data (industries, facilities, etc.)
+        '/table',            // Table data queries
+        '/availabilities',   // Report availability data
+        '/reports/',         // Report data
+        '/dashboard/',       // Dashboard data
+        '/getFloatingDockUsage',
+        '/getWharfUsage',
+        '/getFloatingWharfUsage',
+    ];
+    
+    return cacheableEndpoints.some(endpoint => url.includes(endpoint));
+};
+
+// Dynamic stale time based on endpoint type
+const getStaleTime = (url) => {
+    if (url.includes('/dropdown')) return 10 * 60 * 1000; // 10 minutes for dropdown data
+    if (url.includes('/dashboard/')) return 5 * 60 * 1000; // 5 minutes for dashboard data
+    if (url.includes('/availabilities') || url.includes('/reports/')) return 2 * 60 * 1000; // 2 minutes for reports
+    if (url.includes('/table')) return 1 * 60 * 1000; // 1 minute for table data
+    return 30 * 1000; // 30 seconds default
+};
+
+// Auto-invalidation patterns for mutations
+const invalidateRelatedCaches = (url, method) => {
+    const queryClient = getQueryClient();
+    const normalizedMethod = method.toUpperCase();
+    
+    // Only invalidate for mutation methods
+    if (!['POST', 'PUT', 'PATCH', 'DELETE'].includes(normalizedMethod)) {
+        return;
+    }
+    
+    // Invalidate related cache entries based on URL patterns
+    if (url.includes('/leads/')) {
+        queryClient.invalidateQueries({ queryKey: ['leads/table'] });
+        queryClient.invalidateQueries({ queryKey: ['dashboard/'] });
+    }
+    
+    if (url.includes('/clients/')) {
+        queryClient.invalidateQueries({ queryKey: ['clients/dropdown'] });
+        queryClient.invalidateQueries({ queryKey: ['clients/table'] });
+    }
+    
+    if (url.includes('/clientAgreements/')) {
+        queryClient.invalidateQueries({ queryKey: ['clientAgreements/table'] });
+        queryClient.invalidateQueries({ queryKey: ['reports/'] });
+    }
+    
+    if (url.includes('/facilities/')) {
+        queryClient.invalidateQueries({ queryKey: ['facilities/dropdown'] });
+        queryClient.invalidateQueries({ queryKey: ['availabilities'] });
+        queryClient.invalidateQueries({ queryKey: ['reports/'] });
+    }
+    
+    // Invalidate all report caches for any data mutations
+    if (url.includes('/ajax/') && !url.includes('/dropdown')) {
+        queryClient.invalidateQueries({ queryKey: ['reports/'] });
+        queryClient.invalidateQueries({ queryKey: ['availabilities'] });
+    }
+};
+
+// Original CustomFetch logic extracted for reuse
+const originalCustomFetch = (
     url,
     method,
     formData,
@@ -83,59 +202,143 @@ const CustomFetch = (
         fetchOptions.body = formData ? JSON.stringify(formData) : undefined;
     }
 
-    return trackPromise(
-        new Promise((resolve, reject) => {
-            fetch(baseUrl + url, fetchOptions)
-                .then(async (response) => {
-                    // Parse the response data
-                    const contentType = response.headers.get('content-type');
-                    let data;
-
-                    if (
-                        contentType &&
-                        contentType.includes('application/json')
-                    ) {
-                        data = await response.json();
-                    } else {
-                        data = await response.text();
+    return new Promise((resolve, reject) => {
+        fetch(baseUrl + url, fetchOptions)
+            .then(async (response) => {
+                // Parse the response data
+                const contentType = response.headers.get('content-type');
+                let data;
+
+                if (
+                    contentType &&
+                    contentType.includes('application/json')
+                ) {
+                    data = await response.json();
+                } else {
+                    data = await response.text();
+                }
+
+                // Create a response object similar to axios for compatibility
+                const responseObj = {
+                    data: data,
+                    status: response.status,
+                    statusText: response.statusText,
+                    headers: response.headers,
+                    ok: response.ok,
+                };
+
+                if (!response.ok) {
+                    // Handle error responses (4xx, 5xx)
+                    const error = new Error(response.statusText);
+                    error.response = responseObj;
+                    throw error;
+                }
+
+                // Handle success
+                if (successCallback) {
+                    successCallback(data);
+                } else {
+                    const error = data.error;
+                    if (error && error !== '') {
+                        toast.error(<div>{parse(error)}</div>);
                     }
+                }
+                resolve(responseObj);
+            })
+            .catch((error) => {
+                let errorMessage = '';
 
-                    // Create a response object similar to axios for compatibility
-                    const responseObj = {
-                        data: data,
-                        status: response.status,
-                        statusText: response.statusText,
-                        headers: response.headers,
-                        ok: response.ok,
-                    };
-
-                    if (!response.ok) {
-                        // Handle error responses (4xx, 5xx)
-                        const error = new Error(response.statusText);
-                        error.response = responseObj;
-                        throw error;
+                if (error.response && error.response.data) {
+                    const { data } = error.response;
+
+                    if (data.errors) {
+                        const { errors } = data;
+
+                        Object.values(errors).forEach((errorArray) => {
+                            errorArray.forEach((errorMsg) => {
+                                errorMessage += `${errorMsg}<br />`;
+                            });
+                        });
+                    } else if (data.message) {
+                        if (data.message === 'CSRF token mismatch.') {
+                            window.location.replace('/login');
+                        } else {
+                            errorMessage = data.message;
+                        }
                     }
+                } else {
+                    errorMessage = error.message;
+                }
 
-                    // Handle success
-                    if (successCallback) {
-                        successCallback(data);
+                if (errorCallback) {
+                    errorCallback(errorMessage);
+                } else {
+                    if (errorMessage !== 'Unauthenticated.') {
+                        toast.error(<div>{parse(errorMessage)}</div>);
                     } else {
-                        const error = data.error;
-                        if (error && error !== '') {
-                            toast.error(<div>{parse(error)}</div>);
+                        console.info(
+                            'You are not authenticated into the system.'
+                        );
+                    }
+                }
+                reject(error);
+            });
+    });
+};
+
+// Enhanced CustomFetch with TanStack Query integration
+const CustomFetch = (
+    url,
+    method,
+    formData,
+    successCallback = null,
+    errorCallback = null
+) => {
+    const queryClient = getQueryClient();
+    const cacheKey = generateCacheKey(url, method, formData);
+    const useCache = shouldCache(method, url);
+    
+    if (useCache) {
+        // Use TanStack Query for cacheable requests
+        return trackPromise(
+            queryClient.fetchQuery({
+                queryKey: cacheKey,
+                queryFn: () => originalCustomFetch(url, method, formData, null, null),
+                staleTime: getStaleTime(url),
+                cacheTime: 10 * 60 * 1000, // 10 minutes cache time
+            }).then(response => {
+                // Call success callback exactly like original implementation
+                if (successCallback) {
+                    successCallback(response.data);
+                }
+                return response;
+            }).catch(error => {
+                // Call error callback exactly like original implementation
+                if (errorCallback) {
+                    let errorMessage = '';
+                    if (error.response && error.response.data) {
+                        const { data } = error.response;
+                        if (data.errors) {
+                            const { errors } = data;
+                            Object.values(errors).forEach((errorArray) => {
+                                errorArray.forEach((errorMsg) => {
+                                    errorMessage += `${errorMsg}<br />`;
+                                });
+                            });
+                        } else if (data.message) {
+                            errorMessage = data.message;
                         }
+                    } else {
+                        errorMessage = error.message;
                     }
-                    resolve(responseObj);
-                })
-                .catch((error) => {
+                    errorCallback(errorMessage);
+                } else {
+                    // Handle default error display like original
                     let errorMessage = '';
-
                     if (error.response && error.response.data) {
                         const { data } = error.response;
-
                         if (data.errors) {
                             const { errors } = data;
-
                             Object.values(errors).forEach((errorArray) => {
                                 errorArray.forEach((errorMsg) => {
                                     errorMessage += `${errorMsg}<br />`;
@@ -144,6 +347,7 @@ const CustomFetch = (
                         } else if (data.message) {
                             if (data.message === 'CSRF token mismatch.') {
                                 window.location.replace('/login');
+                                return;
                             } else {
                                 errorMessage = data.message;
                             }
@@ -152,21 +356,53 @@ const CustomFetch = (
                         errorMessage = error.message;
                     }
 
-                    if (errorCallback) {
-                        errorCallback(errorMessage);
+                    if (errorMessage !== 'Unauthenticated.') {
+                        toast.error(<div>{parse(errorMessage)}</div>);
                     } else {
-                        if (errorMessage !== 'Unauthenticated.') {
-                            toast.error(<div>{parse(errorMessage)}</div>);
-                        } else {
-                            console.info(
-                                'You are not authenticated into the system.'
-                            );
-                        }
+                        console.info('You are not authenticated into the system.');
                     }
-                    reject(error);
-                });
-        })
-    );
+                }
+                throw error;
+            })
+        );
+    } else {
+        // Use original implementation for non-cacheable requests (mutations)
+        const result = trackPromise(
+            originalCustomFetch(url, method, formData, successCallback, errorCallback)
+        );
+        
+        // Auto-invalidate related caches after mutations
+        result.then(() => {
+            invalidateRelatedCaches(url, method);
+        }).catch(() => {
+            // Don't invalidate caches on error
+        });
+        
+        return result;
+    }
+};
+
+// Export the QueryClient instance for potential advanced usage
+CustomFetch.getQueryClient = getQueryClient;
+
+// Method to manually invalidate specific cache patterns
+CustomFetch.invalidateCache = (pattern) => {
+    const queryClient = getQueryClient();
+    if (Array.isArray(pattern)) {
+        queryClient.invalidateQueries({ queryKey: pattern });
+    } else {
+        queryClient.invalidateQueries({ 
+            predicate: (query) => query.queryKey.some(key => 
+                typeof key === 'string' && key.includes(pattern)
+            )
+        });
+    }
+};
+
+// Method to clear all cache
+CustomFetch.clearCache = () => {
+    const queryClient = getQueryClient();
+    queryClient.clear();
 };
 
-export default CustomFetch;
+export default CustomFetch;

package/src/components/Fetch.jsx.backup

@@ -0,0 +1,172 @@
+import React from 'react';
+import { trackPromise } from 'react-promise-tracker';
+import { toast } from 'react-toastify';
+import parse from 'html-react-parser';
+
+const CustomFetch = (
+    url,
+    method,
+    formData,
+    successCallback = null,
+    errorCallback = null
+) => {
+    const baseUrl = '';
+    const headers = {
+        'Content-Type': 'application/json',
+        'X-Requested-With': 'XMLHttpRequest',
+    };
+
+    // Add CSRF token if available
+    const csrfToken = document
+        .querySelector('meta[name="csrf-token"]')
+        ?.getAttribute('content');
+    if (csrfToken) {
+        headers['X-CSRF-TOKEN'] = csrfToken;
+        headers['X-XSRF-TOKEN'] = csrfToken;
+    }
+    const MAX_PAYLOAD_SIZE_MB =
+        parseFloat(import.meta.env.VITE_MAX_PAYLOAD_SIZE_MB) || 4.5;
+    const MAX_PAYLOAD_SIZE = MAX_PAYLOAD_SIZE_MB * 1024 * 1024; // Convert MB to bytes
+
+    // Estimate headers size
+    const headersSize = JSON.stringify(headers).length;
+
+    // Estimate cookies size (if any)
+    const cookies = document.cookie;
+    const cookiesSize = cookies ? cookies.length : 0;
+
+    // Check payload size
+    const payloadSize = new Blob([JSON.stringify(formData)]).size;
+    const totalRequestSize = payloadSize + headersSize + cookiesSize;
+
+    if (totalRequestSize > MAX_PAYLOAD_SIZE) {
+        const errorMessage =
+            'The request is too large. Please try again with a smaller payload.';
+        if (errorCallback) {
+            errorCallback(errorMessage);
+        } else {
+            toast.error(errorMessage);
+        }
+        return Promise.reject(new Error(errorMessage));
+    }
+
+    if (method.toUpperCase() === 'PUT' || method.toUpperCase() === 'PATCH') {
+        formData = {
+            ...formData,
+            _method: method,
+        };
+    }
+
+    // Configure fetch options
+    const fetchOptions = {
+        method: method,
+        headers: headers,
+    };
+
+    // For GET and HEAD requests, convert formData to query parameters
+    if (method.toUpperCase() === 'GET' || method.toUpperCase() === 'HEAD') {
+        if (formData && Object.keys(formData).length > 0) {
+            // Convert formData to query string
+            const queryParams = new URLSearchParams();
+            Object.entries(formData).forEach(([key, value]) => {
+                if (value !== undefined && value !== null) {
+                    queryParams.append(key, value);
+                }
+            });
+            const queryString = queryParams.toString();
+            if (queryString) {
+                url += (url.includes('?') ? '&' : '?') + queryString;
+            }
+        }
+    } else {
+        // For other methods, add body
+        fetchOptions.body = formData ? JSON.stringify(formData) : undefined;
+    }
+
+    return trackPromise(
+        new Promise((resolve, reject) => {
+            fetch(baseUrl + url, fetchOptions)
+                .then(async (response) => {
+                    // Parse the response data
+                    const contentType = response.headers.get('content-type');
+                    let data;
+
+                    if (
+                        contentType &&
+                        contentType.includes('application/json')
+                    ) {
+                        data = await response.json();
+                    } else {
+                        data = await response.text();
+                    }
+
+                    // Create a response object similar to axios for compatibility
+                    const responseObj = {
+                        data: data,
+                        status: response.status,
+                        statusText: response.statusText,
+                        headers: response.headers,
+                        ok: response.ok,
+                    };
+
+                    if (!response.ok) {
+                        // Handle error responses (4xx, 5xx)
+                        const error = new Error(response.statusText);
+                        error.response = responseObj;
+                        throw error;
+                    }
+
+                    // Handle success
+                    if (successCallback) {
+                        successCallback(data);
+                    } else {
+                        const error = data.error;
+                        if (error && error !== '') {
+                            toast.error(<div>{parse(error)}</div>);
+                        }
+                    }
+                    resolve(responseObj);
+                })
+                .catch((error) => {
+                    let errorMessage = '';
+
+                    if (error.response && error.response.data) {
+                        const { data } = error.response;
+
+                        if (data.errors) {
+                            const { errors } = data;
+
+                            Object.values(errors).forEach((errorArray) => {
+                                errorArray.forEach((errorMsg) => {
+                                    errorMessage += `${errorMsg}<br />`;
+                                });
+                            });
+                        } else if (data.message) {
+                            if (data.message === 'CSRF token mismatch.') {
+                                window.location.replace('/login');
+                            } else {
+                                errorMessage = data.message;
+                            }
+                        }
+                    } else {
+                        errorMessage = error.message;
+                    }
+
+                    if (errorCallback) {
+                        errorCallback(errorMessage);
+                    } else {
+                        if (errorMessage !== 'Unauthenticated.') {
+                            toast.error(<div>{parse(errorMessage)}</div>);
+                        } else {
+                            console.info(
+                                'You are not authenticated into the system.'
+                            );
+                        }
+                    }
+                    reject(error);
+                });
+        })
+    );
+};
+
+export default CustomFetch;

package/src/components/Field.jsx

@@ -1302,12 +1302,14 @@ function Field({
 
                 return htmlContainer;
             case 'html5_date':
-                // Convert inputValue to 'YYYY-MM-DD' if necessary
-                const formattedDate =
-                    inputValue &&
-                    moment(inputValue, moment.ISO_8601, true).isValid()
-                        ? moment(inputValue).format('YYYY-MM-DD')
-                        : inputValue; // Use as-is if it's already in the correct format or invalid
+                // Handle "today" value for new entries
+                let formattedDate = inputValue;
+                if (inputValue === 'today') {
+                    formattedDate = moment().format('YYYY-MM-DD');
+                } else if (inputValue && moment(inputValue, moment.ISO_8601, true).isValid()) {
+                    // Convert inputValue to 'YYYY-MM-DD' if necessary
+                    formattedDate = moment(inputValue).format('YYYY-MM-DD');
+                }
 
                 return (
                     <input
@@ -1321,6 +1323,14 @@ function Field({
                     />
                 );
             case 'html5_datetime':
+                // Handle "today" or "now" value for new entries
+                let formattedDateTime = inputValue;
+                if (inputValue === 'today') {
+                    formattedDateTime = moment().format('YYYY-MM-DD') + 'T00:00';
+                } else if (inputValue === 'now') {
+                    formattedDateTime = moment().format('YYYY-MM-DDTHH:mm');
+                }
+
                 return (
                     <input
                         type="datetime-local"
@@ -1329,8 +1339,8 @@ function Field({
                         placeholder=" "
                         onChange={onChange}
                         value={
-                            inputValue && inputValue !== 'null'
-                                ? inputValue
+                            formattedDateTime && formattedDateTime !== 'null'
+                                ? formattedDateTime
                                 : ''
                         }
                         autoComplete="off"

package/src/components/modals/GalleryModal.jsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import Popup from 'reactjs-popup';
 import { toast } from 'react-toastify';
 import imageCompression from 'browser-image-compression';
-import Vapor from 'laravel-vapor';
+// import Vapor from 'laravel-vapor'; // Commented out to avoid build issues
 import Lightbox from 'yet-another-react-lightbox';
 import 'yet-another-react-lightbox/styles.css';
 import { X, Image as ImageIcon, CloudUpload } from 'lucide-react';