@visns-studio/visns-components 5.6.14 → 5.7.1

package/src/components/crm/styles/QuickAction.module.scss

@@ -1,36 +1,99 @@
 .quickActions {
     width: 100%;
-    background: rgba(var(--bg-rgb), 0.95);
-    padding: var(--padding);
-    border-top: solid 4px rgba(var(--bg-rgb), 1.05);
-    border-bottom: solid 1px rgba(var(--primary-rgb), 0.25);
+    background: rgba(var(--bg-rgb), 0.98);
+    padding: 0.75rem var(--padding);
+    border-top: solid 3px rgba(var(--primary-rgb), 0.1);
+    border-bottom: solid 1px rgba(var(--primary-rgb), 0.15);
     color: var(--paragraph-color);
     display: flex;
-    flex-wrap: nowrap;
+    flex-wrap: wrap;
     align-items: center;
-    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+    overflow: visible; /* Ensure dropdowns are visible */
+    position: relative; /* Create a stacking context */
+    z-index: 100; /* Ensure proper stacking */
+    gap: 0.5rem; /* Add consistent spacing between elements */
+
+    .actionIcon {
+        width: 32px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: rgba(var(--primary-rgb), 0.08);
+        border-radius: 50%;
+        margin-right: 0.75rem;
+        position: relative;
+        color: rgba(var(--primary-rgb), 0.8);
+        transition: all 0.2s ease;
 
-    > span {
-        width: max-content;
-        display: block;
-        font-weight: var(--title-weight);
-        padding: 0 1rem 0 0;
+        &:hover {
+            background-color: rgba(var(--primary-rgb), 0.12);
+            transform: scale(1.05);
+        }
+
+        &::after {
+            content: '';
+            position: absolute;
+            right: -0.5rem;
+            top: 50%;
+            transform: translateY(-50%);
+            height: 60%;
+            width: 1px;
+            background-color: rgba(var(--primary-rgb), 0.15);
+        }
     }
 
     > button {
         appearance: none;
-        border: 1px solid rgba(var(--primary-rgb), 0.25);
-        border-radius: var(--br);
-        background: transparent;
+        border: 1px solid rgba(var(--primary-rgb), 0.2);
+        border-radius: var(--br, 4px);
+        background: rgba(var(--bg-rgb), 1);
         width: max-content;
         color: var(--paragraph-color);
-        padding: 0.35rem 0.65rem;
-        margin: 0 0.25rem;
-        transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
+        padding: 0.4rem 0.8rem;
+        margin: 0 0.2rem;
+        font-size: 0.85rem;
+        font-weight: 500;
+        transition: all 0.2s ease;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 32px;
+        position: relative;
+        overflow: hidden;
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(
+                to bottom,
+                rgba(var(--primary-rgb), 0.05),
+                transparent
+            );
+            opacity: 0;
+            transition: opacity 0.2s ease;
+        }
 
         &:hover {
-            background: var(--tertiary-color);
-            transform: translateY(-2px);
+            background: rgba(var(--bg-rgb), 1);
+            transform: translateY(-1px);
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
+            border-color: rgba(var(--primary-rgb), 0.3);
+
+            &::before {
+                opacity: 1;
+            }
+        }
+
+        &:active {
+            transform: translateY(0);
+            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
         }
     }
 
@@ -38,24 +101,34 @@
         display: flex;
         align-items: center;
         background: transparent;
-        margin: 0 0.25rem;
+        margin-left: auto; /* Push search to the right */
         flex-grow: 1;
         position: relative;
+        max-width: 300px; /* Limit width for better appearance */
+        overflow: visible; /* Allow dropdown to be visible */
 
         input[type='text'] {
             flex-grow: 1;
-            border: none;
+            border: 1px solid rgba(var(--primary-rgb), 0.2);
             outline: none;
-            padding: 4px 0.65rem;
-            padding-right: 30px;
-            border-radius: var(--br);
+            padding: 0.5rem 0.75rem;
+            padding-right: 36px;
+            border-radius: var(--br, 4px);
             height: 32px;
-            font-size: 14px;
+            font-size: 0.85rem;
             width: 100%;
-            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+            transition: all 0.2s ease;
+            background-color: rgba(var(--bg-rgb), 1);
+
+            &::placeholder {
+                color: rgba(var(--paragraph-rgb), 0.5);
+                font-size: 0.85rem;
+            }
 
             &:focus {
-                box-shadow: 0 0 8px rgba(var(--primary-rgb), 0.5);
+                box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.15);
+                border-color: rgba(var(--primary-rgb), 0.4);
             }
         }
 
@@ -65,35 +138,73 @@
             display: flex;
             align-items: center;
             justify-content: center;
+            cursor: pointer;
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            transition: background-color 0.2s ease;
+
+            &:hover {
+                background-color: rgba(var(--primary-rgb), 0.05);
+            }
         }
 
         .searchIcon {
-            width: 20px;
-            height: 20px;
+            width: 18px;
+            height: 18px;
+            color: rgba(var(--paragraph-rgb), 0.6);
+            transition: color 0.2s ease;
+
+            &:hover {
+                color: rgba(var(--primary-rgb), 0.8);
+            }
         }
     }
 
-    .searchResults {
+    /* Search results styling */
+    :global(.AutocompletePlace-results) {
         position: absolute;
         top: 100%;
         width: 100%;
-        background: var(--third-color);
-        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
-        z-index: 100;
+        background: var(--bg-color, white);
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+        z-index: 9999; /* Ensure it appears on top */
         max-height: 400px;
         overflow-y: auto;
-        border-radius: var(--br);
-        margin-top: 5px;
+        overflow-x: hidden; /* Prevent horizontal scrolling */
+        border-radius: calc(var(--br, 4px) - 1px);
+        margin-top: 6px;
+        border: 1px solid rgba(var(--primary-rgb), 0.1);
+        scrollbar-width: thin;
+        scrollbar-color: rgba(var(--primary-rgb), 0.2) transparent;
+
+        &::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        &::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background-color: rgba(var(--primary-rgb), 0.2);
+            border-radius: 3px;
+        }
     }
 
     .resultItem {
-        padding: 0.5rem 1rem;
+        padding: 0.5rem 0.75rem;
         cursor: pointer;
-        transition: background-color 0.3s ease, transform 0.2s ease;
+        transition: all 0.15s ease;
+        border-bottom: 1px solid rgba(var(--primary-rgb), 0.05);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 100%;
 
         &:hover {
-            background-color: #f2f2f2;
-            transform: translateX(5px);
+            background-color: rgba(var(--primary-rgb), 0.05);
+            padding-left: 1rem;
         }
 
         &:last-child {
@@ -102,25 +213,36 @@
 
         h3 {
             margin: 0;
-            font-weight: var(--title-weight);
-            color: var(--header-color);
-            font-size: 14px;
+            font-weight: 600;
+            color: var(--header-color, #333);
+            font-size: 0.8rem;
+            padding-bottom: 6px;
+            border-bottom: 1px solid rgba(var(--primary-rgb), 0.08);
+            text-transform: uppercase;
+            letter-spacing: 0.03em;
         }
 
         p {
             margin: 0.25rem 0 0;
             color: var(--paragraph-color);
-            font-size: 13px;
+            font-size: 0.85rem;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            line-height: 1.4;
         }
 
         &.selected {
-            background-color: rgba(var(--primary-rgb), 0.1);
+            background-color: rgba(var(--primary-rgb), 0.08);
+            font-weight: 500;
+            padding-left: 1rem;
+            border-left: 2px solid rgba(var(--primary-rgb), 0.5);
         }
     }
 
     .resultItemDivider {
         height: 1px;
-        background-color: var(--border-color);
-        margin: 0.25rem 0;
+        background-color: rgba(var(--primary-rgb), 0.08);
+        margin: 0.25rem 0.75rem;
     }
 }

package/src/components/styles/global.css

@@ -223,6 +223,11 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
     backdrop-filter: blur(3px);
 }
 
+.modalWide {
+    width: 80vw !important;
+    max-width: 1200px !important;
+}
+
 .AutocompletePlace-results {
     z-index: 999;
     width: 500px;

package/src/components/utils/ConfirmDialog.js

@@ -0,0 +1,155 @@
+import Swal from 'sweetalert2';
+import '../crm/generic/styles/SweetAlertCustom.css';
+
+/**
+ * A utility function that replaces react-confirm-alert with SweetAlert2
+ * while maintaining a similar look and feel.
+ *
+ * @param {Object} options - Configuration options
+ * @param {string} options.title - The title of the confirmation dialog
+ * @param {string} options.message - The message to display in the dialog
+ * @param {Array} options.buttons - Array of button objects with label and onClick properties
+ * @param {Object} options.customUI - Custom UI function (ignored, for compatibility only)
+ * @param {boolean} options.closeOnClickOutside - Whether to close on outside click (default: true)
+ * @param {boolean} options.closeOnEscape - Whether to close on escape key (default: true)
+ * @param {string} options.keyCodeForClose - Key code for closing (ignored, for compatibility only)
+ * @param {boolean} options.willUnmount - Unmount callback (ignored, for compatibility only)
+ * @param {boolean} options.afterClose - After close callback (ignored, for compatibility only)
+ * @param {boolean} options.onClickOutside - On click outside callback (ignored, for compatibility only)
+ * @param {boolean} options.onKeypressEscape - On keypress escape callback (ignored, for compatibility only)
+ * @param {Object} options.overlayClassName - Overlay class name (ignored, for compatibility only)
+ * @param {Object} options.overlayStyle - Overlay style (ignored, for compatibility only)
+ * @param {Object} options.contentClassName - Content class name (ignored, for compatibility only)
+ * @param {Object} options.contentStyle - Content style (ignored, for compatibility only)
+ * @param {Object} options.bodyClassName - Body class name (ignored, for compatibility only)
+ * @param {Object} options.titleClassName - Title class name (ignored, for compatibility only)
+ * @param {Object} options.titleStyle - Title style (ignored, for compatibility only)
+ * @param {Object} options.messageClassName - Message class name (ignored, for compatibility only)
+ * @param {Object} options.messageStyle - Message style (ignored, for compatibility only)
+ * @param {Object} options.buttonClassName - Button class name (ignored, for compatibility only)
+ * @param {Object} options.buttonStyle - Button style (ignored, for compatibility only)
+ * @param {Object} options.childrenClassName - Children class name (ignored, for compatibility only)
+ */
+export const confirmDialog = (options) => {
+    const {
+        title = '',
+        message = '',
+        buttons = [],
+        closeOnClickOutside = true,
+        closeOnEscape = true,
+        data = null, // Optional data object from the selected row
+    } = options;
+
+    // Find Yes and No buttons if they exist
+    const yesButton = buttons.find((btn) => btn.label === 'Yes');
+    const noButton = buttons.find((btn) => btn.label === 'No');
+
+    // Default button text
+    const confirmButtonText = yesButton ? yesButton.label : 'Yes';
+    const cancelButtonText = noButton ? noButton.label : 'No';
+
+    // Enhanced message with item details if available
+    let enhancedMessage = message;
+    let itemDetails = '';
+
+    // Extract meaningful information from the data object if available
+    if (data) {
+        // Common identifiers that might be present in data objects
+        const identifiers = [
+            'name',
+            'label',
+            'title',
+            'email',
+            'username',
+            'id',
+            'code',
+            'reference',
+        ];
+
+        // Find the first available identifier
+        for (const id of identifiers) {
+            if (
+                data[id] &&
+                typeof data[id] === 'string' &&
+                data[id].trim() !== ''
+            ) {
+                itemDetails = data[id];
+                break;
+            }
+        }
+
+        // If we found an identifier, enhance the message
+        if (itemDetails && !message.includes(itemDetails)) {
+            // If the message already contains a question mark, add the details before it
+            if (message.includes('?')) {
+                enhancedMessage = message.replace('?', `"${itemDetails}"?`);
+            } else {
+                // Otherwise, append the details
+                enhancedMessage = `${message} "${itemDetails}"`;
+            }
+        }
+    }
+
+    // Configure SweetAlert2 options
+    const swalOptions = {
+        title: title,
+        html: enhancedMessage,
+        icon: 'question',
+        showCancelButton: true,
+        confirmButtonText: confirmButtonText,
+        cancelButtonText: cancelButtonText,
+        confirmButtonColor: 'var(--primary-color, #4f46e5)',
+        cancelButtonColor: '#6b7280',
+        allowOutsideClick: closeOnClickOutside,
+        allowEscapeKey: closeOnEscape,
+        reverseButtons: true,
+        focusCancel: false,
+        buttonsStyling: true,
+        showClass: {
+            popup: 'swal2-show',
+            backdrop: 'swal2-backdrop-show',
+            icon: 'swal2-icon-show',
+        },
+        customClass: {
+            container: 'swal2-container',
+            popup: 'swal2-popup',
+            header: 'swal2-header',
+            title: 'swal2-title',
+            closeButton: 'swal2-close-button',
+            icon: 'swal2-icon',
+            image: 'swal2-image',
+            htmlContainer: 'swal2-html-container',
+            input: 'swal2-input',
+            inputLabel: 'swal2-input-label',
+            validationMessage: 'swal2-validation-message',
+            actions: 'swal2-actions',
+            confirmButton: 'swal2-confirm',
+            denyButton: 'swal2-deny',
+            cancelButton: 'swal2-cancel',
+            loader: 'swal2-loader',
+            footer: 'swal2-footer',
+        },
+    };
+
+    // Show SweetAlert2 dialog
+    Swal.fire(swalOptions).then((result) => {
+        if (
+            result.isConfirmed &&
+            yesButton &&
+            typeof yesButton.onClick === 'function'
+        ) {
+            yesButton.onClick();
+        } else if (
+            result.dismiss === Swal.DismissReason.cancel &&
+            noButton &&
+            typeof noButton.onClick === 'function'
+        ) {
+            noButton.onClick();
+        }
+    });
+};
+
+// Export as default for compatibility with react-confirm-alert
+export default {
+    confirmAlert: confirmDialog,
+};

package/src/utils/fetchUtil.js

@@ -0,0 +1,240 @@
+/**
+ * Fetch utility to replace axios with similar API
+ * Designed to work with Laravel backend
+ */
+
+/**
+ * Creates an axios-like response object from a fetch response
+ * @param {Response} response - The fetch Response object
+ * @param {any} data - The parsed response data
+ * @returns {Object} - An axios-like response object
+ */
+const createAxiosLikeResponse = async (response, data) => {
+    return {
+        data,
+        status: response.status,
+        statusText: response.statusText,
+        headers: response.headers,
+        config: {
+            url: response.url,
+            method: response.type,
+        },
+        request: null, // Not available in fetch
+    };
+};
+
+/**
+ * Main fetch function that mimics axios API
+ * @param {Object|string} config - Axios-like config object or URL string
+ * @returns {Promise} - Promise that resolves to an axios-like response
+ */
+const fetchUtil = async (config) => {
+    // Handle string input (URL)
+    if (typeof config === 'string') {
+        config = { url: config };
+    }
+
+    const {
+        url,
+        method = 'GET',
+        headers = {},
+        data,
+        params,
+        responseType,
+        withCredentials = false,
+    } = config;
+
+    // Build request URL with query parameters
+    let requestUrl = url;
+
+    // For GET and HEAD requests, convert data to query parameters if it exists
+    if (
+        (method.toUpperCase() === 'GET' || method.toUpperCase() === 'HEAD') &&
+        data &&
+        typeof data === 'object' &&
+        !(data instanceof FormData)
+    ) {
+        // Create params object if it doesn't exist
+        params = params || {};
+        // Merge data into params
+        Object.assign(params, data);
+        // Remove data since we've moved it to params
+        data = undefined;
+    }
+
+    // Add params to URL
+    if (params) {
+        const queryParams = new URLSearchParams();
+        Object.entries(params).forEach(([key, value]) => {
+            if (value !== undefined && value !== null) {
+                queryParams.append(key, value);
+            }
+        });
+        const queryString = queryParams.toString();
+        if (queryString) {
+            requestUrl += (url.includes('?') ? '&' : '?') + queryString;
+        }
+    }
+
+    // Set up headers
+    const requestHeaders = new Headers({
+        ...headers,
+    });
+
+    // If not explicitly set and sending data, default to JSON
+    if (
+        data &&
+        !requestHeaders.has('Content-Type') &&
+        !(data instanceof FormData)
+    ) {
+        requestHeaders.set('Content-Type', 'application/json');
+    }
+
+    // Add CSRF token for Laravel if available
+    const csrfToken = document
+        .querySelector('meta[name="csrf-token"]')
+        ?.getAttribute('content');
+    if (csrfToken) {
+        // Laravel accepts the CSRF token in different headers
+        if (!requestHeaders.has('X-CSRF-TOKEN')) {
+            requestHeaders.set('X-CSRF-TOKEN', csrfToken);
+        }
+        if (!requestHeaders.has('X-XSRF-TOKEN')) {
+            requestHeaders.set('X-XSRF-TOKEN', csrfToken);
+        }
+    }
+
+    // Add X-Requested-With header for Laravel to recognize AJAX requests
+    if (!requestHeaders.has('X-Requested-With')) {
+        requestHeaders.set('X-Requested-With', 'XMLHttpRequest');
+    }
+
+    // Handle credentials
+    const credentials = withCredentials ? 'include' : 'same-origin';
+
+    // Prepare request options
+    const requestOptions = {
+        method: method.toUpperCase(),
+        headers: requestHeaders,
+        credentials,
+    };
+
+    // Add body for non-GET requests
+    if (method.toUpperCase() !== 'GET' && method.toUpperCase() !== 'HEAD') {
+        // Handle Laravel's _method for PUT/PATCH/DELETE
+        if (['PUT', 'PATCH', 'DELETE'].includes(method.toUpperCase())) {
+            if (data instanceof FormData) {
+                data.append('_method', method.toUpperCase());
+                requestOptions.method = 'POST';
+            } else if (data && typeof data === 'object') {
+                requestOptions.body = JSON.stringify({
+                    ...data,
+                    _method: method.toUpperCase(),
+                });
+                requestOptions.method = 'POST';
+            } else {
+                // If no data, create a body with just _method
+                requestOptions.body = JSON.stringify({
+                    _method: method.toUpperCase(),
+                });
+                requestOptions.method = 'POST';
+            }
+        } else {
+            // For regular POST
+            if (data instanceof FormData) {
+                requestOptions.body = data;
+            } else if (data !== undefined) {
+                requestOptions.body = JSON.stringify(data);
+            }
+        }
+    }
+
+    try {
+        const response = await fetch(requestUrl, requestOptions);
+
+        // Parse response based on content type or specified responseType
+        let responseData;
+
+        if (responseType === 'blob') {
+            responseData = await response.blob();
+        } else if (responseType === 'arraybuffer') {
+            responseData = await response.arrayBuffer();
+        } else if (responseType === 'text') {
+            responseData = await response.text();
+        } else {
+            // Default: try to parse as JSON, fallback to text
+            const contentType = response.headers.get('content-type');
+            if (contentType && contentType.includes('application/json')) {
+                responseData = await response.json();
+            } else {
+                responseData = await response.text();
+            }
+        }
+
+        const axiosLikeResponse = await createAxiosLikeResponse(
+            response,
+            responseData
+        );
+
+        // Handle error responses (4xx, 5xx)
+        if (!response.ok) {
+            const error = new Error(response.statusText || 'Request failed');
+            error.response = axiosLikeResponse;
+            throw error;
+        }
+
+        return axiosLikeResponse;
+    } catch (error) {
+        // If the error already has a response property, it's from our code above
+        if (!error.response) {
+            // Network errors or other fetch errors
+            error.response = {
+                data: { message: error.message },
+                status: 0,
+                statusText: error.message,
+            };
+        }
+        throw error;
+    }
+};
+
+// Add convenience methods to match axios API
+['get', 'delete', 'head', 'options'].forEach((method) => {
+    fetchUtil[method] = (url, config = {}) => {
+        // If second parameter is data (object but not a config object with recognized properties)
+        if (
+            config &&
+            typeof config === 'object' &&
+            !config.headers &&
+            !config.params &&
+            !config.responseType &&
+            !config.withCredentials
+        ) {
+            // It's likely data, not config
+            return fetchUtil({
+                method,
+                url,
+                params: config, // Use as query parameters
+            });
+        }
+
+        return fetchUtil({
+            ...config,
+            method,
+            url,
+        });
+    };
+});
+
+['post', 'put', 'patch'].forEach((method) => {
+    fetchUtil[method] = (url, data, config = {}) => {
+        return fetchUtil({
+            ...config,
+            method,
+            url,
+            data,
+        });
+    };
+});
+
+export default fetchUtil;