@visns-studio/visns-components 5.15.21 → 5.15.23

package/README.md

@@ -69,7 +69,7 @@ VISNS Components is a React-based UI component library that provides a set of re
 
 ### Utility Components
 
--   **Fetch** - Axios-based data fetching with error handling
+-   **Fetch** - Advanced data fetching with intelligent caching, error handling, and TanStack Query integration
 -   **Download** - File download functionality
 -   **Loader** - Loading indicators
 -   **Notification** - Toast notifications
@@ -2489,18 +2489,20 @@ const BulkCardProcessor = () => {
 
 ### Utility Components
 
-#### CustomFetch
+#### CustomFetch (Fetch.jsx)
 
-Data fetching utility with error handling and payload size validation.
+Advanced data fetching utility with intelligent caching, error handling, and payload validation powered by TanStack Query (v5.15.21+).
 
 ```jsx
-// Using async/await
+import CustomFetch from '@visns-studio/visns-components';
+
+// Basic usage - async/await
 const result = await CustomFetch('/api/data', 'GET', { param1: 'value1' });
 
 // Using callbacks
 CustomFetch(
     '/api/data',
-    'GET',
+    'POST',
     { param1: 'value1' },
     (result) => {
         // Success callback
@@ -2511,16 +2513,71 @@ CustomFetch(
         console.error(error);
     }
 );
+
+// Manual cache management
+CustomFetch.invalidateCache('/api/data');  // Invalidate specific pattern
+CustomFetch.clearCache();                  // Clear all cache
 ```
 
-The CustomFetch component includes these features:
+**Core Features:**
 
--   **Payload Size Validation**: Automatically checks if the request payload exceeds the maximum allowed size (default: 4.5MB, configurable via `VITE_MAX_PAYLOAD_SIZE_MB` environment variable)
--   **Toast Notifications**: Displays error messages using toast notifications
+-   **Intelligent Caching**: Selective caching with TanStack Query for optimal performance
+-   **Payload Size Validation**: Automatically validates request size (default: 4.5MB, configurable via `VITE_MAX_PAYLOAD_SIZE_MB`)
+-   **Toast Notifications**: Error messages displayed using react-toastify
 -   **Promise Tracking**: Integrates with react-promise-tracker for loading indicators
 -   **HTML Error Parsing**: Properly renders HTML content in error messages
--   **CSRF Protection**: Redirects to login page on CSRF token mismatch
--   **Authentication Handling**: Silently handles unauthenticated errors without showing toast notifications
+-   **CSRF Protection**: Automatic token handling and redirect on mismatch
+-   **Authentication Handling**: Silent handling of unauthenticated errors
+
+**Caching Strategy (v5.15.21+):**
+
+The Fetch component implements an intelligent caching strategy designed to balance performance with data freshness:
+
+-   **GET Requests**: NOT cached by default to ensure data freshness
+-   **Selective POST Caching**: Only specific safe endpoints are cached:
+    -   `/dropdown` - Reference data (10 min stale time) - Industries, facilities, user lists
+    -   `/table` - Table queries (1 min stale time) - Grid data with stable results
+    -   `/availabilities` - Report availability (2 min stale time) - Report metadata
+    -   `/reports/` - Report data (2 min stale time) - Generated report results
+    -   `/dashboard/` - Dashboard metrics (5 min stale time) - Aggregated metrics
+    -   Wharf usage endpoints (30 sec stale time) - Real-time usage data
+
+-   **Auto-invalidation**: Mutations (POST/PUT/PATCH/DELETE) automatically invalidate related caches:
+    -   Lead mutations → invalidate lead tables and dashboards
+    -   Client mutations → invalidate client dropdowns and tables  
+    -   Agreement mutations → invalidate agreement tables and reports
+    -   Facility mutations → invalidate availability and report caches
+    -   Any data mutation → invalidate related report caches
+
+-   **Cache Configuration**:
+    -   **Cache Time**: 10 minutes - data stays in memory
+    -   **Stale Time**: Varies by endpoint type (30 seconds to 10 minutes)
+    -   **Retry Policy**: Conservative 1 retry on failure
+    -   **Window Focus**: No automatic refetch on focus
+    -   **Network Reconnect**: Automatic refetch on reconnection
+
+**Advanced Cache Control:**
+
+```jsx
+// Invalidate specific cache patterns
+CustomFetch.invalidateCache('/clients/dropdown');  // String pattern
+CustomFetch.invalidateCache(['clients', 'table']); // Array key
+
+// Clear entire cache
+CustomFetch.clearCache();
+
+// Access QueryClient for advanced operations
+const queryClient = CustomFetch.getQueryClient();
+queryClient.invalidateQueries({ queryKey: ['specific', 'key'] });
+```
+
+**Implementation Details:**
+
+-   **Singleton QueryClient**: Single instance shared across entire application
+-   **Cache Key Generation**: Consistent keys based on URL, method, and parameters
+-   **Smart Invalidation**: Related caches automatically cleared on mutations
+-   **Error Preservation**: Original error handling callbacks maintained
+-   **Backward Compatibility**: All existing CustomFetch usage continues to work unchanged
 
 #### CameraPlacement
 Interactive camera placement and visualization tool for security system design. Features a comprehensive Verkada camera database, FOV triangle visualization, and professional export capabilities with enhanced UI consistency.

package/package.json

@@ -3,17 +3,17 @@
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/sortable": "^10.0.0",
         "@dnd-kit/utilities": "^3.2.2",
-        "@emotion/is-prop-valid": "^1.3.1",
-        "@fontsource/barlow": "^5.2.6",
+        "@emotion/is-prop-valid": "^1.4.0",
+        "@fontsource/barlow": "^5.2.8",
         "@inovua/reactdatagrid-community": "^5.10.2",
         "@inovua/reactdatagrid-enterprise": "^5.10.2",
-        "@mapbox/mapbox-gl-geocoder": "^5.1.1",
+        "@mapbox/mapbox-gl-geocoder": "^5.1.2",
         "@nivo/bar": "^0.99.0",
         "@nivo/core": "^0.99.0",
         "@nivo/line": "^0.99.0",
         "@nivo/pie": "^0.99.0",
         "@react-pdf/renderer": "^4.3.0",
-        "@tanstack/react-query": "^5.85.5",
+        "@tanstack/react-query": "^5.89.0",
         "@tinymce/miniature": "^6.0.0",
         "@tinymce/tinymce-react": "^6.3.0",
         "@uiw/react-color": "^2.8.0",
@@ -24,18 +24,18 @@
         "array-move": "^4.0.0",
         "awesome-debounce-promise": "^2.1.0",
         "browser-image-compression": "^2.0.2",
-        "dayjs": "^1.11.15",
+        "dayjs": "^1.11.18",
         "fabric": "^6.7.1",
         "file-saver": "^2.0.5",
-        "framer-motion": "^12.23.12",
+        "framer-motion": "^12.23.14",
         "html-react-parser": "^5.2.6",
         "html2canvas": "^1.4.1",
         "lodash": "^4.17.21",
         "lodash.debounce": "^4.0.8",
-        "lucide-react": "^0.542.0",
-        "mapbox-gl": "^3.14.0",
+        "lucide-react": "^0.544.0",
+        "mapbox-gl": "^3.15.0",
         "moment": "^2.30.1",
-        "motion": "^12.23.12",
+        "motion": "^12.23.14",
         "numeral": "^2.0.6",
         "pluralize": "^8.0.0",
         "qrcode.react": "^4.2.0",
@@ -64,18 +64,18 @@
         "reactjs-popup": "^2.0.6",
         "style-loader": "^4.0.0",
         "swapy": "^1.0.5",
-        "sweetalert2": "^11.22.5",
+        "sweetalert2": "^11.23.0",
         "tesseract.js": "^6.0.1",
         "truncate": "^3.0.0",
         "uuid": "^11.1.0",
         "validator": "^13.15.15",
-        "vite": "^6.3.5",
+        "vite": "^6.3.6",
         "xlsx": "^0.18.5",
         "yarn": "^1.22.22",
         "yet-another-react-lightbox": "^3.25.0"
     },
     "devDependencies": {
-        "@babel/core": "^7.28.3",
+        "@babel/core": "^7.28.4",
         "@babel/plugin-transform-runtime": "^7.28.3",
         "@babel/preset-env": "^7.28.3",
         "@babel/preset-react": "^7.27.1",
@@ -86,7 +86,7 @@
         "mini-css-extract-plugin": "^2.9.4",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "sass": "^1.91.0",
+        "sass": "^1.92.1",
         "sass-loader": "^16.0.5"
     },
     "peerDependencies": {
@@ -94,7 +94,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.15.21",
+    "version": "5.15.23",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/Fetch.jsx

@@ -75,7 +75,7 @@ const shouldCache = (method, url) => {
 
 // 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('/dropdown')) return 1 * 60 * 1000; // 1 minute 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