@visns-studio/visns-components 5.8.11 → 5.8.13

package/src/components/crm/examples/FormWithSectionHeaders.jsx

@@ -0,0 +1,266 @@
+import React from 'react';
+import SectionHeader from '../SectionHeader';
+import Field from '../Field';
+
+/**
+ * Example form component that demonstrates how to use the SectionHeader component
+ * This shows how to implement the form seen in the screenshot with improved styling
+ */
+const FormWithSectionHeaders = ({ formData, setFormData, onChange }) => {
+  // Sample form settings for demonstration
+  const formSettings = {
+    // Form settings would go here
+  };
+
+  // Sample input classes
+  const inputClass = {
+    // Input classes would go here
+  };
+
+  return (
+    <form>
+      {/* Site Details Section */}
+      <SectionHeader label="Site Details" />
+      
+      {/* Site Name Field */}
+      <Field
+        settings={{
+          id: 'site_name',
+          type: 'text',
+          label: 'Site Name',
+          required: true,
+          size: 'half'
+        }}
+        inputValue={formData.site_name}
+        inputClass={inputClass}
+        onChange={onChange}
+      />
+      
+      {/* Address Fields */}
+      <Field
+        settings={{
+          id: 'address_1',
+          type: 'text',
+          label: 'Address #1',
+          required: true,
+          size: 'half'
+        }}
+        inputValue={formData.address_1}
+        inputClass={inputClass}
+        onChange={onChange}
+      />
+      
+      <Field
+        settings={{
+          id: 'address_2',
+          type: 'text',
+          label: 'Address #2',
+          size: 'half'
+        }}
+        inputValue={formData.address_2}
+        inputClass={inputClass}
+        onChange={onChange}
+      />
+      
+      {/* Suburb Field */}
+      <Field
+        settings={{
+          id: 'suburb',
+          type: 'text',
+          label: 'Suburb',
+          required: true,
+          size: 'half'
+        }}
+        inputValue={formData.suburb}
+        inputClass={inputClass}
+        onChange={onChange}
+      />
+      
+      {/* Postcode Field */}
+      <Field
+        settings={{
+          id: 'postcode',
+          type: 'text',
+          label: 'Postcode',
+          required: true,
+          size: 'half'
+        }}
+        inputValue={formData.postcode}
+        inputClass={inputClass}
+        onChange={onChange}
+      />
+      
+      {/* State Field */}
+      <Field
+        settings={{
+          id: 'state',
+          type: 'text',
+          label: 'State',
+          required: true,
+          size: 'half'
+        }}
+        inputValue={formData.state}
+        inputClass={inputClass}
+        onChange={onChange}
+      />
+      
+      {/* Country Field */}
+      <Field
+        settings={{
+          id: 'country',
+          type: 'text',
+          label: 'Country',
+          required: true,
+          size: 'half'
+        }}
+        inputValue={formData.country}
+        inputClass={inputClass}
+        onChange={onChange}
+      />
+      
+      {/* Delivery Address Section */}
+      <Field
+        settings={{
+          id: 'delivery_address_section',
+          type: 'line-break',
+          label: 'Delivery Address #1',
+          size: 'full'
+        }}
+        inputValue=""
+        inputClass={inputClass}
+      />
+      
+      {/* Delivery Address Fields */}
+      <Field
+        settings={{
+          id: 'delivery_address_1',
+          type: 'text',
+          label: 'Delivery Address #1',
+          required: true,
+          size: 'half'
+        }}
+        inputValue={formData.delivery_address_1}
+        inputClass={inputClass}
+        onChange={onChange}
+      />
+      
+      <Field
+        settings={{
+          id: 'delivery_address_2',
+          type: 'text',
+          label: 'Delivery Address #2',
+          size: 'half'
+        }}
+        inputValue={formData.delivery_address_2}
+        inputClass={inputClass}
+        onChange={onChange}
+      />
+      
+      {/* Delivery Suburb Field */}
+      <Field
+        settings={{
+          id: 'delivery_suburb',
+          type: 'text',
+          label: 'Delivery Suburb',
+          required: true,
+          size: 'half'
+        }}
+        inputValue={formData.delivery_suburb}
+        inputClass={inputClass}
+        onChange={onChange}
+      />
+      
+      {/* Delivery Postcode Field */}
+      <Field
+        settings={{
+          id: 'delivery_postcode',
+          type: 'text',
+          label: 'Delivery Postcode',
+          required: true,
+          size: 'half'
+        }}
+        inputValue={formData.delivery_postcode}
+        inputClass={inputClass}
+        onChange={onChange}
+      />
+      
+      {/* Delivery State Field */}
+      <Field
+        settings={{
+          id: 'delivery_state',
+          type: 'text',
+          label: 'Delivery State',
+          required: true,
+          size: 'half'
+        }}
+        inputValue={formData.delivery_state}
+        inputClass={inputClass}
+        onChange={onChange}
+      />
+      
+      {/* Delivery Country Field */}
+      <Field
+        settings={{
+          id: 'delivery_country',
+          type: 'text',
+          label: 'Delivery Country',
+          required: true,
+          size: 'half'
+        }}
+        inputValue={formData.delivery_country}
+        inputClass={inputClass}
+        onChange={onChange}
+      />
+      
+      {/* Contact Details Section */}
+      <SectionHeader label="Contact Details" />
+      
+      {/* Firstname Field */}
+      <Field
+        settings={{
+          id: 'firstname',
+          type: 'text',
+          label: 'Firstname',
+          required: true,
+          size: 'half'
+        }}
+        inputValue={formData.firstname}
+        inputClass={inputClass}
+        onChange={onChange}
+      />
+      
+      {/* Surname Field */}
+      <Field
+        settings={{
+          id: 'surname',
+          type: 'text',
+          label: 'Surname',
+          size: 'half'
+        }}
+        inputValue={formData.surname}
+        inputClass={inputClass}
+        onChange={onChange}
+      />
+      
+      {/* Save Button */}
+      <div style={{ width: '100%', textAlign: 'center', marginTop: '20px' }}>
+        <button 
+          type="submit" 
+          style={{
+            background: 'var(--primary-color, #2684FF)',
+            color: 'var(--secondary-color, #fff)',
+            padding: '10px 20px',
+            border: 'none',
+            borderRadius: 'var(--br, 3px)',
+            cursor: 'pointer',
+            fontWeight: 'bold'
+          }}
+        >
+          Save & Close
+        </button>
+      </div>
+    </form>
+  );
+};
+
+export default FormWithSectionHeaders;

package/src/components/crm/generic/ConfirmationDialog.jsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import Swal from 'sweetalert2';
+import './styles/SweetAlert.module.css';
+
+/**
+ * A utility function that uses SweetAlert2 for confirmation dialogs
+ *
+ * @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 {string} options.confirmLabel - Label for the confirm button
+ * @param {string} options.cancelLabel - Label for the cancel button
+ * @param {Function} options.onConfirm - Function to call when confirmed
+ * @param {Function} options.onCancel - Function to call when cancelled
+ * @param {Object} options.data - Optional data object to pass to the dialog
+ * @returns {Promise} - A promise that resolves when the dialog is closed
+ */
+export const showConfirmDialog = ({
+    title = 'Confirm',
+    message = 'Are you sure?',
+    confirmLabel = 'Yes',
+    cancelLabel = 'No',
+    onConfirm = () => {},
+    onCancel = () => {},
+    data = null,
+}) => {
+    // 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',
+            'description',
+        ];
+
+        // 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: confirmLabel,
+        cancelButtonText: cancelLabel,
+        confirmButtonColor: 'var(--primary-color, #4f46e5)',
+        cancelButtonColor: '#6b7280',
+        allowOutsideClick: true,
+        allowEscapeKey: true,
+        reverseButtons: true,
+        focusCancel: false,
+        buttonsStyling: true,
+    };
+
+    // Show SweetAlert2 dialog
+    return Swal.fire(swalOptions).then((result) => {
+        if (result.isConfirmed) {
+            onConfirm();
+        } else if (result.dismiss === Swal.DismissReason.cancel) {
+            onCancel();
+        }
+    });
+};
+
+export default showConfirmDialog;

package/src/components/crm/generic/GenericIndex.jsx

@@ -1496,6 +1496,8 @@ function GenericIndex({
 
     // Add a ref to store the latest rowsSelected value
     const rowsSelectedRef = useRef({});
+    // Create a ref to track if we've already processed active filter combinations
+    const activeFilterRef = useRef(null);
 
     // Update the ref whenever rowsSelected changes
     useEffect(() => {
@@ -1847,9 +1849,6 @@ function GenericIndex({
             return;
         }
 
-        // Create a ref to track if we've already processed this combination
-        const activeFilterRef = useRef(null);
-
         // Find the active filter and its child
         const activeFilter = subnav?.find((filter) => {
             if (filter.isParent) {