@visns-studio/visns-components 5.14.7 → 5.14.8

package/package.json

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

package/src/components/DataGrid.jsx

@@ -3719,9 +3719,9 @@ const DataGrid = forwardRef(
                     onClose={modalClose}
                     closeOnDocumentClick={false}
                     contentStyle={{
-                        width: windowWidth < 768 ? '95vw' : '80vw',
+                        width: windowWidth < 768 ? '95vw' : '90vw',
                         minWidth: windowWidth < 768 ? '95vw' : '600px',
-                        maxWidth: '1200px',
+                        maxWidth: '1400px',
                         ...(formData.verticalAlign === 'top' && {
                             position: 'fixed',
                             top: '5vh',

package/src/components/generic/GenericDetail.jsx

@@ -242,7 +242,7 @@ function GenericDetail({
 
     /** Fileupload states */
     const [files, setFiles] = useState([]);
-    
+
     // Debug logging for files state changes
     useEffect(() => {
         console.log('GenericDetail: Files state changed:', {
@@ -250,7 +250,7 @@ function GenericDetail({
             filesCount: files ? files.length : 0,
             filesType: typeof files,
             isArray: Array.isArray(files),
-            firstFile: files && files.length > 0 ? files[0] : null
+            firstFile: files && files.length > 0 ? files[0] : null,
         });
     }, [files]);
     const [loadingProgress, setLoadingProgress] = useState(0);
@@ -275,6 +275,16 @@ function GenericDetail({
     const [lightboxOpen, setLightboxOpen] = useState(false);
     const [lightboxIndex, setLightboxIndex] = useState(0);
 
+    /** Window Width State for Responsive Modal */
+    const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+
+    // Handle window resize for responsive modal
+    useEffect(() => {
+        const handleResize = () => setWindowWidth(window.innerWidth);
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
     // Gallery modal close function
     const modalGalleryClose = () => {
         setModalGalleryShow(false);
@@ -1437,7 +1447,7 @@ function GenericDetail({
                 return renderLink();
             case 'ocrTemplate':
                 return (
-                    <OcrTemplateEnhanced 
+                    <OcrTemplateEnhanced
                         id={id}
                         data={data}
                         setData={setData}
@@ -1754,14 +1764,20 @@ function GenericDetail({
                             // Helper function to get nested object value using dot notation
                             const getNestedValue = (obj, path) => {
                                 if (!obj || !path) return null;
-                                return path.split('.').reduce((current, key) => {
-                                    return current && current[key] !== undefined ? current[key] : null;
-                                }, obj);
+                                return path
+                                    .split('.')
+                                    .reduce((current, key) => {
+                                        return current &&
+                                            current[key] !== undefined
+                                            ? current[key]
+                                            : null;
+                                    }, obj);
                             };
 
                             // Extract files using nested key support
-                            const files = activeTabConfig.key 
-                                ? getNestedValue(data, activeTabConfig.key) || []
+                            const files = activeTabConfig.key
+                                ? getNestedValue(data, activeTabConfig.key) ||
+                                  []
                                 : [];
 
                             const downloadFile = (file) => {
@@ -1874,7 +1890,9 @@ function GenericDetail({
 
                             // Create a fetchData function that refetches the main data
                             const handleFetchData = () => {
-                                console.log('GenericDetail: DropZone fetchData called, refetching main data...');
+                                console.log(
+                                    'GenericDetail: DropZone fetchData called, refetching main data...'
+                                );
                                 setDataReload(!dataReload);
                             };
 
@@ -1889,20 +1907,38 @@ function GenericDetail({
                                         fetchData={handleFetchData}
                                         files={files}
                                         settings={{
-                                            url: replaceDropzoneUrlParams(activeTabConfig.url),
+                                            url: replaceDropzoneUrlParams(
+                                                activeTabConfig.url
+                                            ),
                                             method: 'PUT',
-                                            type: activeTabConfig.filetype === 'image' ? 'gallery' : 'list',
+                                            type:
+                                                activeTabConfig.filetype ===
+                                                'image'
+                                                    ? 'gallery'
+                                                    : 'list',
                                             data: {
-                                                file_relationship: activeTabConfig.file_relationship,
+                                                file_relationship:
+                                                    activeTabConfig.file_relationship,
                                             },
-                                            folder: activeTabConfig.folder || 'uploads',
+                                            folder:
+                                                activeTabConfig.folder ||
+                                                'uploads',
                                             filetype: activeTabConfig.filetype,
-                                            deleteUrl: replaceDropzoneUrlParams(activeTabConfig.deleteUrl) || '/ajax/files/delete',
+                                            deleteUrl:
+                                                replaceDropzoneUrlParams(
+                                                    activeTabConfig.deleteUrl
+                                                ) || '/ajax/files/delete',
                                             showDescription: true,
                                         }}
-                                        url={replaceDropzoneUrlParams(activeTabConfig.url)}
+                                        url={replaceDropzoneUrlParams(
+                                            activeTabConfig.url
+                                        )}
                                         urlKey={activeTabConfig.urlKey}
-                                        deleteUrl={replaceDropzoneUrlParams(activeTabConfig.deleteUrl) || '/ajax/files/delete'}
+                                        deleteUrl={
+                                            replaceDropzoneUrlParams(
+                                                activeTabConfig.deleteUrl
+                                            ) || '/ajax/files/delete'
+                                        }
                                         entityData={data}
                                         routeParams={routeParams}
                                         dataKey={activeTabConfig.key}
@@ -2623,19 +2659,27 @@ function GenericDetail({
                                                                                 className={
                                                                                     item.size ===
                                                                                     'full'
-                                                                                        ? item.type === 'ocrTemplate' 
-                                                                                            ? styles['fw-grid-item']
+                                                                                        ? item.type ===
+                                                                                          'ocrTemplate'
+                                                                                            ? styles[
+                                                                                                  'fw-grid-item'
+                                                                                              ]
                                                                                             : `${styles['fw-grid-item']} ${styles.notecolor}`
                                                                                         : null
                                                                                 }
                                                                             >
-                                                                                {item.type !== 'ocrTemplate' && (
+                                                                                {item.type !==
+                                                                                    'ocrTemplate' && (
                                                                                     <strong>
                                                                                         {item.label
                                                                                             ? `${item.label}:`
                                                                                             : null}
                                                                                     </strong>
-                                                                                )}{item.type !== 'ocrTemplate' ? ' ' : ''}
+                                                                                )}
+                                                                                {item.type !==
+                                                                                'ocrTemplate'
+                                                                                    ? ' '
+                                                                                    : ''}
                                                                                 {item
                                                                                     .href
                                                                                     ?.url &&
@@ -3792,8 +3836,9 @@ function GenericDetail({
                 onClose={modalClose}
                 closeOnDocumentClick={false}
                 contentStyle={{
-                    width: '80vw',
-                    maxWidth: '1200px',
+                    width: windowWidth < 768 ? '95vw' : '90vw',
+                    minWidth: windowWidth < 768 ? '95vw' : '600px',
+                    maxWidth: '1400px',
                     ...(formData.verticalAlign === 'top' && {
                         position: 'fixed',
                         top: '5vh',
@@ -3804,13 +3849,15 @@ function GenericDetail({
                 }}
             >
                 <div
-                    className={`modalwrap top--modal modalWide ${
+                    className={`${styles.modalwrap} ${
+                            styles['top--modal']
+                        } ${styles.modalWide} ${
                         formData.verticalAlign === 'top'
                             ? 'modal-top-aligned'
                             : ''
                     }`}
                 >
-                    <div className="modal">
+                    <div className={styles.modal}>
                         <Form
                             closeModal={modalClose}
                             columnId={formId}

package/src/components/generic/GenericIndex.jsx

@@ -19,16 +19,20 @@ import GenericReportForm from './GenericReportForm';
 
 import styles from '../styles/GenericIndex.module.scss';
 
-function useWindowHeight() {
+function useWindowDimensions() {
     const [windowHeight, setWindowHeight] = useState(window.innerHeight);
+    const [windowWidth, setWindowWidth] = useState(window.innerWidth);
 
     useEffect(() => {
-        const handleResize = () => setWindowHeight(window.innerHeight);
+        const handleResize = () => {
+            setWindowHeight(window.innerHeight);
+            setWindowWidth(window.innerWidth);
+        };
         window.addEventListener('resize', handleResize);
         return () => window.removeEventListener('resize', handleResize);
     }, []);
 
-    return windowHeight;
+    return { windowHeight, windowWidth };
 }
 
 function useConfig(setting, tabs, filters, setRowsSelected, tableSetting) {
@@ -236,7 +240,7 @@ function GenericIndex({
     const [customActionModalShow, setCustomActionModalShow] = useState(false);
     const [customActionFormData, setCustomActionFormData] = useState({});
     const [customActionConfig, setCustomActionConfig] = useState(null);
-    const windowHeight = useWindowHeight();
+    const { windowHeight, windowWidth } = useWindowDimensions();
     const { config, setConfig, subnav, setSubnav } = useConfig(
         setting,
         setting.tabs,
@@ -1007,8 +1011,9 @@ function GenericIndex({
                 onClose={closeCustomActionModal}
                 closeOnDocumentClick={false}
                 contentStyle={{
-                    width: '80vw',
-                    maxWidth: '1200px',
+                    width: windowWidth < 768 ? '95vw' : '90vw',
+                    minWidth: windowWidth < 768 ? '95vw' : '600px',
+                    maxWidth: '1400px',
                     ...(customActionFormData.verticalAlign === 'top' && {
                         position: 'fixed',
                         top: '5vh',
@@ -1019,13 +1024,15 @@ function GenericIndex({
                 }}
             >
                 <div
-                    className={`modalwrap top--modal modalWide ${
+                    className={`${styles.modalwrap} ${
+                            styles['top--modal']
+                        } ${styles.modalWide} ${
                         customActionFormData.verticalAlign === 'top'
                             ? 'modal-top-aligned'
                             : ''
                     }`}
                 >
-                    <div className="modal">
+                    <div className={styles.modal}>
                         <Form
                             closeModal={closeCustomActionModal}
                             formSettings={customActionFormData}

package/src/components/generic/NotificationList.jsx

@@ -1,13 +1,11 @@
 import React, { useState, useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
 import Table from '../DataGrid';
-import { Bell, Check, ArrowLeft } from 'lucide-react';
+import { Bell, Check } from 'lucide-react';
 import { toast } from 'react-toastify';
 import CustomFetch from '../Fetch';
 import styles from '../styles/NotificationList.module.scss';
 
 const NotificationList = () => {
-    const navigate = useNavigate();
     const [loading, setLoading] = useState(false);
 
     const markAllAsRead = useCallback(() => {
@@ -50,25 +48,26 @@ const NotificationList = () => {
         },
         columns: [
             {
-                id: 'data',
-                jsonData: 'label',
+                id: ['data'],
+                nameFrom: 'label',
                 label: 'Message',
-                type: 'json',
-                flex: 1,
+                type: 'relation',
+                minWidth: 300,
+                wordWrap: true,
             },
             {
                 id: 'created_at',
                 label: 'Created At',
                 type: 'datetime',
                 minWidth: 180,
-                maxWidth: 180,
+                maxWidth: 200,
             },
             {
                 id: 'read_at',
                 label: 'Read At',
                 type: 'datetime',
                 minWidth: 180,
-                maxWidth: 180,
+                maxWidth: 200,
             },
         ],
         settings: [],
@@ -111,21 +110,6 @@ const NotificationList = () => {
                     </div>
                 </div>
             </div>
-            <div className={styles.grid}>
-                <div className={styles.grid__row}>
-                    <div className={styles.grid__full}>
-                        <div className={styles.backButtonContainer}>
-                            <button
-                                className={styles.backButton}
-                                onClick={() => navigate('/')}
-                            >
-                                <ArrowLeft size={16} />
-                                <span>Back to Dashboard</span>
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
         </div>
     );
 };

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

@@ -145,8 +145,9 @@
 }
 
 .modalWide {
-    width: 80vw;
-    max-width: 1200px;
+    width: 90vw;
+    max-width: 1400px;
+    min-width: 600px;
 }
 
 .modal {

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

@@ -11,6 +11,12 @@
         grid-template-columns: 1fr 1fr 1fr 1fr;
         gap: 1em;
     }
+
+    /* Enhanced styling for wider modals */
+    .modal & form {
+        gap: 1.5em;
+        max-width: none;
+    }
 }
 
 .formItem {
@@ -238,9 +244,10 @@ input[type='file'] {
 .modal__content {
     width: 100%;
     position: relative;
-    padding: 0.75rem;
-    max-height: 80vh;
+    padding: 1rem;
+    max-height: 85vh;
     overflow-y: auto;
+    min-height: 400px;
 
     .btn {
         background: var(--primary-color);

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

@@ -945,3 +945,27 @@
     }
 }
 
+// Modal styles (consistent with DataGrid)
+.modalwrap {
+    background: var(--tertiary-color);
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+}
+
+.top--modal {
+    position: relative;
+    z-index: 1000;
+}
+
+.modalWide {
+    width: 90vw;
+    max-width: 1400px;
+    min-width: 600px;
+}
+
+.modal {
+    width: 100%;
+    position: relative;
+}
+

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

@@ -1090,3 +1090,27 @@
         filter: brightness(1.1);
     }
 }
+
+// Modal styles (consistent with DataGrid)
+.modalwrap {
+    background: var(--tertiary-color);
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+}
+
+.top--modal {
+    position: relative;
+    z-index: 1000;
+}
+
+.modalWide {
+    width: 90vw;
+    max-width: 1400px;
+    min-width: 600px;
+}
+
+.modal {
+    width: 100%;
+    position: relative;
+}

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

@@ -84,20 +84,22 @@
 
 /* Notification Box Header */
 .notiboxHeader {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 12px 16px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-    gap: 10px;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: space-between !important;
+    padding: 12px 16px !important;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
+    gap: 12px !important;
+    min-height: 48px !important;
 }
 
 .notiboxHeader h3 {
-    margin: 0;
-    font-size: 16px;
-    font-weight: 600;
-    color: var(--heading-color, #333);
-    flex-shrink: 0;
+    margin: 0 !important;
+    font-size: 16px !important;
+    font-weight: 600 !important;
+    color: #333 !important;
+    flex-shrink: 0 !important;
+    flex-grow: 1 !important;
 }
 
 /* Notification Scroll Wrap */
@@ -231,42 +233,41 @@
 }
 
 .notiDismiss {
-    position: absolute;
-    right: 12px;
-    top: 10px;
-    background: transparent;
-    border: none;
-    color: #666;
-    cursor: pointer;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    transition: all 0.2s;
-    opacity: 0.7;
+    position: absolute !important;
+    right: 12px !important;
+    top: 10px !important;
+    background: #f8f9fa !important;
+    border: 1px solid #dee2e6 !important;
+    color: #6c757d !important;
+    cursor: pointer !important;
+    padding: 4px !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    width: 24px !important;
+    height: 24px !important;
+    border-radius: 50% !important;
+    transition: all 0.2s !important;
+    opacity: 1 !important;
+    visibility: visible !important;
+    z-index: 10 !important;
 }
 
 .notiContent:hover .notiDismiss {
-    opacity: 1;
+    background: #e9ecef !important;
+    color: #495057 !important;
+    border-color: #adb5bd !important;
 }
 
 .notiDismiss:hover {
-    background-color: rgba(220, 53, 69, 0.1);
-    color: #dc3545;
-    transform: scale(1.1);
+    background-color: #dc3545 !important;
+    color: #ffffff !important;
+    border-color: #dc3545 !important;
 }
 
 .notiDismiss:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.3);
-    background-color: rgba(220, 53, 69, 0.05);
-}
-
-.notiDismiss:active {
-    transform: scale(0.95);
+    outline: none !important;
+    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.3) !important;
 }
 
 /* Empty State */
@@ -322,46 +323,45 @@
 
 /* Mark All as Read Button */
 .markAllBtn {
-    background-color: var(--primary-color, #0056b3);
-    color: var(--tertiary-color, white);
-    padding: 8px 16px;
-    border-radius: var(--br, 6px);
-    border: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    font-size: 14px;
-    font-weight: 500;
-    cursor: pointer;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    transition: all 0.2s ease;
-    outline: none;
-    white-space: nowrap;
-    flex-shrink: 0;
-    /* Ensure visibility */
-    opacity: 1;
+    background-color: #6c757d !important;
+    color: #ffffff !important;
+    padding: 6px 10px !important;
+    border-radius: 4px !important;
+    border: none !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 4px !important;
+    font-size: 12px !important;
+    font-weight: 500 !important;
+    cursor: pointer !important;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
+    transition: all 0.2s ease !important;
+    outline: none !important;
+    white-space: nowrap !important;
+    flex-shrink: 0 !important;
+    min-width: 120px !important;
+    height: 32px !important;
+    line-height: 1.2 !important;
+    opacity: 1 !important;
+    visibility: visible !important;
+    position: relative !important;
+    z-index: 10 !important;
 }
 
 .markAllBtn:hover:not(:disabled) {
-    background-color: var(--secondary-color, #004494);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-    transform: translateY(-1px);
+    background-color: #5a6268 !important;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
 }
 
 .markAllBtn:focus:not(:disabled) {
-    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb, 0, 86, 179), 0.4);
-}
-
-.markAllBtn:active:not(:disabled) {
-    transform: translateY(0);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0 0 2px rgba(108, 117, 125, 0.4) !important;
 }
 
 .markAllBtn:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-    background-color: #6c757d;
+    opacity: 0.6 !important;
+    cursor: not-allowed !important;
+    background-color: #adb5bd !important;
 }
 
 /* Footer Actions */
@@ -374,41 +374,37 @@
 }
 
 .viewAllBtn {
-    background-color: var(--primary-color, #0056b3);
-    color: var(--tertiary-color, white);
-    font-size: 14px;
-    font-weight: 500;
-    cursor: pointer;
-    padding: 10px 20px;
-    border-radius: var(--br, 6px);
-    border: none;
-    width: auto;
-    min-width: 200px;
-    text-align: center;
-    transition: all 0.2s ease;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    outline: none;
-    position: relative;
-    z-index: 1;
-    /* Ensure visibility and proper contrast */
-    opacity: 1;
-    display: block;
+    background-color: #6c757d !important;
+    color: #ffffff !important;
+    font-size: 14px !important;
+    font-weight: 500 !important;
+    cursor: pointer !important;
+    padding: 12px 24px !important;
+    border-radius: 6px !important;
+    border: none !important;
+    width: 100% !important;
+    max-width: 280px !important;
+    text-align: center !important;
+    transition: all 0.2s ease !important;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
+    outline: none !important;
+    position: relative !important;
+    height: 44px !important;
+    opacity: 1 !important;
+    visibility: visible !important;
+    display: block !important;
+    line-height: 1.2 !important;
+    z-index: 10 !important;
 }
 
 .viewAllBtn:hover:not(:disabled) {
-    background-color: var(--secondary-color, #004494);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-    transform: translateY(-1px);
+    background-color: #5a6268 !important;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25) !important;
 }
 
 .viewAllBtn:focus:not(:disabled) {
-    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb, 0, 86, 179), 0.4);
-    outline: none;
-}
-
-.viewAllBtn:active:not(:disabled) {
-    transform: translateY(0);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0 0 2px rgba(108, 117, 125, 0.4) !important;
+    outline: none !important;
 }
 
 /* Bell Animation */

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

@@ -1,7 +1,7 @@
 .notificationListContainer {
     width: 100%;
-    max-width: 1200px;
-    margin: 0 auto;
+    margin: 0;
+    padding: 0;
 }
 
 .grid {
@@ -88,31 +88,3 @@
     opacity: 0.6;
     cursor: not-allowed;
 }
-
-.backButtonContainer {
-    display: flex;
-    justify-content: center;
-    padding: 16px 0;
-}
-
-.backButton {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    background-color: var(--primary-color);
-    color: white;
-    border: none;
-    border-radius: 6px;
-    padding: 12px 24px;
-    font-size: 14px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    min-width: 200px;
-}
-
-.backButton:hover {
-    background-color: var(--primary-color-darker, #0056b3);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-}

package/src/components/styles/SweetAlert.module.css

@@ -65,9 +65,28 @@
     box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.3) !important;
 }
 
-/* Make the modal more compact */
+/* Make the modal use full width like GenericIndex */
 :global(.swal2-popup.swal2-modal) {
-    max-width: 90%;
+    max-width: 95%;
+    width: 95%;
+    min-width: 800px;
+}
+
+/* Responsive adjustments for smaller screens */
+@media (max-width: 1024px) {
+    :global(.swal2-popup.swal2-modal) {
+        max-width: 90%;
+        width: 90%;
+        min-width: 600px;
+    }
+}
+
+@media (max-width: 768px) {
+    :global(.swal2-popup.swal2-modal) {
+        max-width: 95%;
+        width: 95%;
+        min-width: 320px;
+    }
 }
 
 /* Reduce spacing between elements */

package/src/components/styles/global.css

@@ -225,11 +225,6 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
     backdrop-filter: blur(3px);
 }
 
-.modalWide {
-    width: 80vw !important;
-    max-width: 1200px !important;
-}
-
 /* Top-aligned modal styles */
 .modal-top-aligned {
     max-height: 90vh !important;