@visns-studio/visns-components 5.8.12 → 5.8.13

package/package.json

@@ -4,14 +4,14 @@
         "@fontsource/barlow": "^5.2.5",
         "@inovua/reactdatagrid-community": "^5.10.2",
         "@inovua/reactdatagrid-enterprise": "^5.10.2",
-        "@nivo/bar": "^0.96.0",
-        "@nivo/core": "^0.96.0",
-        "@nivo/line": "^0.96.0",
-        "@nivo/pie": "^0.96.0",
+        "@nivo/bar": "^0.98.0",
+        "@nivo/core": "^0.98.0",
+        "@nivo/line": "^0.98.0",
+        "@nivo/pie": "^0.98.0",
         "@tinymce/tinymce-react": "^6.1.0",
         "@visns-studio/visns-datagrid-community": "^1.0.14",
         "@visns-studio/visns-datagrid-enterprise": "^1.0.14",
-        "@vitejs/plugin-react": "^4.4.1",
+        "@vitejs/plugin-react": "^4.5.0",
         "add": "^2.0.6",
         "akar-icons": "^1.9.31",
         "array-move": "^4.0.0",
@@ -82,7 +82,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.8.12",
+    "version": "5.8.13",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/Autocomplete.jsx

@@ -1,6 +1,6 @@
-import React, { useState, useEffect, useCallback, useMemo, memo } from 'react';
+import { useState, useEffect, useCallback, useMemo, memo, useRef } from 'react';
 import AwesomeDebouncePromise from 'awesome-debounce-promise';
-import { ToggleOffFill, ToggleOnFill } from 'akar-icons';
+import { ToggleOffFill, ToggleOnFill, Search } from 'akar-icons';
 import styles from './styles/Autocomplete.module.scss';
 import fetchUtil from '../../utils/fetchUtil';
 
@@ -20,12 +20,16 @@ const VisnsAutocomplete = memo((props) => {
         onSelect,
         setFormData,
         style,
+        placeholder = 'Type an address',
     } = props;
 
     const [search, setSearch] = useState('');
     const [results, setResults] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
     const [overwrite, setOverwrite] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    const inputRef = useRef(null);
+    const resultsRef = useRef(null);
 
     // Memoize URL building logic to avoid recalculations
     const buildSearchUrl = useCallback(
@@ -67,11 +71,25 @@ const VisnsAutocomplete = memo((props) => {
             fetchUtil
                 .get(url)
                 .then((response) => {
-                    setResults(response.data.features || []);
+                    // Ensure we're accessing the features array from the response
+                    // Check if response.data is a string (sometimes happens with certain APIs)
+                    let parsedData = response.data;
+                    if (typeof response.data === 'string') {
+                        try {
+                            parsedData = JSON.parse(response.data);
+                        } catch (e) {
+                            console.error('Error parsing response data:', e);
+                        }
+                    }
+
+                    const features = parsedData?.features || [];
+
+                    setResults(features);
                     setIsLoading(false);
                 })
                 .catch((error) => {
-                    console.log(error);
+                    console.error('Error fetching address suggestions:', error);
+                    setResults([]);
                     setIsLoading(false);
                 });
         },
@@ -105,15 +123,48 @@ const VisnsAutocomplete = memo((props) => {
 
     const handleItemClicked = useCallback(
         (place) => {
-            const address = place.address || '';
-            const text = place.text || '';
-            const search = address && text ? `${address} ${text}` : text;
+            // Use place_name as the primary display value as it contains the full formatted address
+            const displayValue = place.place_name || '';
+
+            // If place_name is not available, construct from components
+            const fallbackValue = (() => {
+                const address = place.address || '';
+                const text = place.text || '';
+                const context = place.context
+                    ? place.context
+                          .filter((ctx) => ctx.text)
+                          .map((ctx) => ctx.text)
+                          .join(', ')
+                    : '';
+
+                if (address && text) {
+                    return context
+                        ? `${address} ${text}, ${context}`
+                        : `${address} ${text}`;
+                } else if (text) {
+                    return context ? `${text}, ${context}` : text;
+                }
+                return '';
+            })();
+
+            const finalValue = displayValue || fallbackValue;
 
-            setSearch(search);
+            setSearch(finalValue);
             setResults([]);
-            onSelect(place, field);
+            setIsFocused(false);
+
+            // Update form data with the selected value
+            setFormData((prevState) => ({
+                ...prevState,
+                [field]: finalValue,
+            }));
+
+            // Call the onSelect callback with the place object and field
+            if (onSelect) {
+                onSelect(place, field);
+            }
         },
-        [field, onSelect]
+        [field, onSelect, setFormData]
     );
 
     const handleOverwrite = useCallback(() => {
@@ -148,54 +199,165 @@ const VisnsAutocomplete = memo((props) => {
         [style]
     );
 
+    // Handle focus and blur events
+    const handleFocus = useCallback(() => {
+        setIsFocused(true);
+        if (!overwrite && search && search.length > 1) {
+            setIsLoading(true);
+            performSearch(1, search);
+        }
+    }, [overwrite, search, performSearch]);
+
+    const handleBlur = useCallback(() => {
+        // Delay hiding results to allow for click events on results
+        setTimeout(() => {
+            setIsFocused(false);
+        }, 200);
+    }, []);
+
+    // Handle click outside to close results
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (
+                resultsRef.current &&
+                !resultsRef.current.contains(event.target) &&
+                inputRef.current &&
+                !inputRef.current.contains(event.target)
+            ) {
+                setIsFocused(false);
+            }
+        };
+
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+
     return (
         <div className={styles.AutocompletePlace}>
-            <input
-                className={styles['AutocompletePlace-input']}
-                style={inputStyle}
-                type="text"
-                value={search || ''}
-                onChange={handleSearchChange}
-                placeholder="Type an address"
-                autoComplete="off"
-            />
-
-            {overwrite ? (
-                <ToggleOnFill
-                    data-tooltip-id="system-tooltip"
-                    data-tooltip-content="Enable Autocomplete"
-                    strokeWidth={2}
-                    size={24}
-                    onClick={handleOverwrite}
-                    className={styles.toggleActive}
+            <div className={styles['AutocompletePlace-inputWrapper']}>
+                <Search
+                    size={16}
+                    className={styles['AutocompletePlace-searchIcon']}
                 />
-            ) : (
-                <ToggleOffFill
-                    data-tooltip-id="system-tooltip"
-                    data-tooltip-content="Disable Autocomplete"
-                    strokeWidth={2}
-                    size={24}
-                    onClick={handleOverwrite}
+                <input
+                    ref={inputRef}
+                    className={styles['AutocompletePlace-input']}
+                    style={inputStyle}
+                    type="text"
+                    value={search || ''}
+                    onChange={handleSearchChange}
+                    onFocus={handleFocus}
+                    onBlur={handleBlur}
+                    placeholder={placeholder}
+                    autoComplete="off"
                 />
-            )}
 
-            {results.length > 0 && (
-                <ul className="AutocompletePlace-results">
-                    {results.map((place) => (
+                {overwrite ? (
+                    <ToggleOnFill
+                        data-tooltip-id="system-tooltip"
+                        data-tooltip-content="Enable Autocomplete"
+                        strokeWidth={2}
+                        size={24}
+                        onClick={handleOverwrite}
+                        className={styles.toggleActive}
+                    />
+                ) : (
+                    <ToggleOffFill
+                        data-tooltip-id="system-tooltip"
+                        data-tooltip-content="Disable Autocomplete"
+                        strokeWidth={2}
+                        size={24}
+                        onClick={handleOverwrite}
+                    />
+                )}
+            </div>
+
+            {isFocused && (search.length > 1 || isLoading) && (
+                <ul
+                    ref={resultsRef}
+                    className={styles['AutocompletePlace-results']}
+                >
+                    {isLoading ? (
                         <li
-                            key={place.id}
-                            className={styles['AutocompletePlace-items']}
-                            onClick={() => handleItemClicked(place)}
+                            className={`${styles['AutocompletePlace-items']} ${styles['AutocompletePlace-loading']}`}
                         >
-                            {place.place_name}
-                        </li>
-                    ))}
-
-                    {isLoading && (
-                        <li className={styles['AutocompletePlace-items']}>
                             Loading...
                         </li>
-                    )}
+                    ) : Array.isArray(results) && results.length > 0 ? (
+                        results.map((place) => (
+                            <li
+                                key={place.id}
+                                className={styles['AutocompletePlace-items']}
+                                onClick={() => handleItemClicked(place)}
+                            >
+                                <div
+                                    className={
+                                        styles['AutocompletePlace-itemMain']
+                                    }
+                                >
+                                    {place.address && (
+                                        <span
+                                            className={
+                                                styles[
+                                                    'AutocompletePlace-itemAddress'
+                                                ]
+                                            }
+                                        >
+                                            {place.address}
+                                        </span>
+                                    )}
+                                    <span
+                                        className={
+                                            styles['AutocompletePlace-itemText']
+                                        }
+                                    >
+                                        {place.text}
+                                    </span>
+                                </div>
+                                <div
+                                    className={
+                                        styles[
+                                            'AutocompletePlace-itemSecondary'
+                                        ]
+                                    }
+                                >
+                                    {place.context &&
+                                        place.context
+                                            .filter((ctx) => ctx.text)
+                                            .map((ctx, index) => (
+                                                <span key={ctx.id || index}>
+                                                    {ctx.text}
+                                                </span>
+                                            ))
+                                            .reduce(
+                                                (prev, curr, i) => [
+                                                    prev,
+                                                    <span
+                                                        key={`sep-${i}`}
+                                                        className={
+                                                            styles[
+                                                                'AutocompletePlace-itemSeparator'
+                                                            ]
+                                                        }
+                                                    >
+                                                        ,{' '}
+                                                    </span>,
+                                                    curr,
+                                                ],
+                                                []
+                                            )}
+                                </div>
+                            </li>
+                        ))
+                    ) : search.length > 1 ? (
+                        <li
+                            className={`${styles['AutocompletePlace-items']} ${styles['AutocompletePlace-noResults']}`}
+                        >
+                            No results found
+                        </li>
+                    ) : null}
                 </ul>
             )}
         </div>

package/src/components/crm/Field.jsx

@@ -1033,8 +1033,35 @@ function Field({
                 return (
                     <div className={styles.formbreak}>
                         <span>
+                            <ChevronRight
+                                strokeWidth={2}
+                                size={16}
+                                style={{
+                                    display: 'inline-block',
+                                    marginRight: '8px',
+                                    verticalAlign: 'middle',
+                                    position: 'relative',
+                                    top: '-1px',
+                                    color: 'var(--secondary-color, #fff)',
+                                    opacity: 0.9,
+                                    filter: 'drop-shadow(0 1px 1px rgba(0,0,0,0.1))',
+                                }}
+                            />
                             {settings.label}{' '}
-                            {settings.required === true ? '*' : ''}
+                            {settings.required === true ? (
+                                <span
+                                    style={{
+                                        color: 'var(--error-color, #ff6b6b)',
+                                        textShadow: '0 1px 1px rgba(0,0,0,0.2)',
+                                        marginLeft: '2px',
+                                        fontWeight: 'bold',
+                                    }}
+                                >
+                                    *
+                                </span>
+                            ) : (
+                                ''
+                            )}
                         </span>
                     </div>
                 );

package/src/components/crm/Form.jsx

@@ -459,16 +459,29 @@ function Form({
                 ? [context[3]?.text, context[4]?.text]
                 : [context[2]?.text, context[3]?.text];
 
+        // Determine the prefix based on the id parameter
+        let prefix = '';
+        if (id !== 'address1') {
+            // Extract prefix from id (e.g., 'delivery_address1' -> 'delivery_')
+            const match = id.match(/^(.+?)address1$/);
+            if (match && match[1]) {
+                prefix = match[1];
+            }
+        }
+
+        // Create the formDataUpdate object with the appropriate field names
         const formDataUpdate = {
-            address1,
-            address2,
-            suburb,
-            postcode,
-            state,
-            country,
+            [`${prefix}address1`]: address1,
+            [`${prefix}address2`]: address2,
+            [`${prefix}suburb`]: suburb,
+            [`${prefix}postcode`]: postcode,
+            [`${prefix}state`]: state,
+            [`${prefix}country`]: country,
         };
 
-        if (formData.same_address === true || id !== 'address1') {
+        // If same_address is true and we're updating the primary address,
+        // also update the postal address fields
+        if (formData.same_address === true && id === 'address1') {
             Object.assign(formDataUpdate, {
                 postal_address1: address1,
                 postal_address2: address2,

package/src/components/crm/SectionHeader.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ChevronRight } from 'akar-icons';
+import styles from './styles/Field.module.scss';
+
+/**
+ * SectionHeader component for form sections
+ * @param {Object} props - Component props
+ * @param {string} props.label - The section header text
+ * @param {React.ReactNode} [props.icon] - Optional custom icon (defaults to ChevronRight)
+ * @returns {React.ReactElement} The section header component
+ */
+const SectionHeader = ({ label, icon }) => {
+  return (
+    <div className={styles.sectionHeader}>
+      {icon || (
+        <ChevronRight
+          strokeWidth={2}
+          size={20}
+          style={{
+            filter: 'drop-shadow(0 1px 1px rgba(0,0,0,0.2))',
+          }}
+        />
+      )}
+      <span>{label}</span>
+    </div>
+  );
+};
+
+export default SectionHeader;

package/src/components/crm/examples/FormStylingGuide.md

@@ -0,0 +1,71 @@
+# Form Styling Guide
+
+This guide explains how to use the improved styling for form sections and line breaks.
+
+## Section Headers
+
+The `SectionHeader` component provides a visually appealing header for form sections. It uses the project's color scheme with fallbacks to ensure good contrast.
+
+### Usage
+
+```jsx
+import SectionHeader from '../SectionHeader';
+
+// In your form component
+<SectionHeader label="Site Details" />
+```
+
+### Props
+
+- `label` (string, required): The text to display in the header
+- `icon` (React element, optional): Custom icon to replace the default ChevronRight icon
+
+## Line Breaks
+
+The `line-break` field type has been enhanced to provide better visual separation between form sections.
+
+### Usage
+
+```jsx
+<Field
+  settings={{
+    id: 'delivery_address_section',
+    type: 'line-break',
+    label: 'Delivery Address #1',
+    size: 'full'
+  }}
+  inputValue=""
+  inputClass={inputClass}
+/>
+```
+
+## Color Scheme Compatibility
+
+Both components are designed to work with the project's color scheme variables:
+
+- `--primary-color`: Used for background
+- `--secondary-color`: Used for text and accents
+- `--error-color`: Used for required field indicators (*)
+
+Fallback colors are provided to ensure good contrast even if the project variables don't provide enough contrast.
+
+## Example
+
+See `FormWithSectionHeaders.jsx` for a complete example of how to implement a form with the new styling.
+
+## Tips for Best Results
+
+1. Use `SectionHeader` for main form sections (e.g., "Site Details", "Contact Details")
+2. Use `line-break` for subsections within a main section
+3. Ensure your project's color scheme provides good contrast between primary and secondary colors
+4. If you experience contrast issues, you can override the styles locally:
+
+```jsx
+<SectionHeader 
+  label="Custom Section" 
+  style={{ 
+    background: '#3a86ff', 
+    color: '#ffffff' 
+  }} 
+/>
+```

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/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) {

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

@@ -1,36 +1,120 @@
-.AutocompletePlace-results {
-    z-index: 999;
+.AutocompletePlace {
+    position: relative;
+    width: 100%;
+
+    .toggleActive {
+        color: var(--secondary-color);
+    }
 }
 
-.AutocompletePlace {
+.AutocompletePlace-inputWrapper {
     position: relative;
+    display: flex;
+    align-items: center;
     width: 100%;
 
-    > svg {
+    > svg:not(.AutocompletePlace-searchIcon) {
         position: absolute;
-        right: 0.5em;
-        top: 0.95rem;
-        color: var(--paragraph-color);
+        right: 0.5rem;
+        top: 50%;
+        transform: translateY(-50%);
         cursor: pointer;
     }
+}
 
-    .toggleActive {
-        color: var(--secondary-color);
-    }
+.AutocompletePlace-searchIcon {
+    position: absolute;
+    left: 0.75rem;
+    color: var(--paragraph-color);
+    pointer-events: none;
 }
 
 .AutocompletePlace-input {
-    padding: 0.65rem 3rem 0.65rem 0.95rem !important;
+    padding: 0.65rem 3rem 0.65rem 2.25rem !important;
     height: 38px;
+    width: 100%;
+    border: 1px solid rgba(var(--primary-rgb), 0.2);
+    border-radius: 4px;
+    outline: none;
+    font-size: 0.9rem;
+
+    &:focus {
+        border-color: rgba(var(--primary-rgb), 0.5);
+        box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
+    }
+}
+
+.AutocompletePlace-results {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 999;
+    margin: 0;
+    padding: 0;
+    background-color: #fff;
+    border: 1px solid rgba(var(--primary-rgb), 0.2);
+    border-radius: 4px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    max-height: 250px;
+    overflow-y: auto;
+    margin-top: 4px;
+    list-style-type: none;
+    width: 100%;
 }
 
 .AutocompletePlace-items {
     list-style: none;
     border-bottom: 1px solid rgba(var(--primary-rgb), 0.1);
     cursor: pointer;
-    padding: 5px;
+    padding: 8px 12px;
+    font-size: 0.9rem;
+
+    &:last-child {
+        border-bottom: none;
+    }
 
     &:hover {
-        background-color: rgba(var(--paragraph-rgb), 0.065);
+        background-color: rgba(var(--primary-rgb), 0.05);
     }
 }
+
+.AutocompletePlace-itemMain {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-bottom: 2px;
+}
+
+.AutocompletePlace-itemAddress {
+    font-weight: 600;
+    color: var(--primary-color);
+}
+
+.AutocompletePlace-itemText {
+    color: var(--paragraph-color);
+}
+
+.AutocompletePlace-itemSecondary {
+    font-size: 0.8rem;
+    color: rgba(var(--paragraph-rgb), 0.7);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.AutocompletePlace-itemSeparator {
+    opacity: 0.6;
+}
+
+.AutocompletePlace-loading {
+    font-style: italic;
+    color: var(--paragraph-color);
+    text-align: center;
+}
+
+.AutocompletePlace-noResults {
+    font-style: italic;
+    color: var(--paragraph-color);
+    text-align: center;
+}

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

@@ -494,18 +494,101 @@ input[type='file']:hover {
     margin-right: 5px;
 }
 
+/* Section header styling for form sections */
+.sectionHeader {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 0.85em 1.2em;
+    background: var(--primary-color, #2684ff);
+    border-radius: var(--br, 3px);
+    box-sizing: border-box;
+    margin: 0.5em 0 1em 0;
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+
+    /* Add a subtle gradient overlay for depth */
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(
+            to right,
+            rgba(255, 255, 255, 0.15),
+            rgba(255, 255, 255, 0.05)
+        );
+        pointer-events: none;
+    }
+
+    svg {
+        margin-right: 8px;
+        color: var(--secondary-color, #fff);
+    }
+
+    span {
+        font-size: 1em;
+        color: var(--secondary-color, #fff);
+        font-weight: 600;
+        letter-spacing: 0.02em;
+        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+    }
+}
+
+/* Line break styling for form sections */
 .formbreak {
     display: block;
     width: 100%;
-    padding: 1em;
-    background: rgba(var(--primary-rgb), 0.95);
-    border-radius: 3px;
+    padding: 0.85em 1.2em;
+    /* Use a more reliable background that works with any color scheme */
+    background: var(--primary-color, #2684ff);
+    border-radius: var(--br, 3px);
     box-sizing: border-box;
-    border: 2px solid rgba(var(--primary-rgb), 1.1);
+    border-left: 4px solid var(--secondary-color, #fff);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    margin: 0.5em 0;
+    position: relative;
+    overflow: hidden;
+
+    /* Add a subtle gradient overlay for depth */
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(
+            to right,
+            rgba(255, 255, 255, 0.1),
+            rgba(255, 255, 255, 0)
+        );
+        pointer-events: none;
+    }
+
+    &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 2px;
+        background: var(--tertiary-color, #fff);
+        opacity: 0.3;
+    }
 
     span {
         font-size: 0.95em;
-        color: var(--secondary-color);
+        color: var(--tertiary-color, #fff);
+        font-weight: 500;
+        letter-spacing: 0.01em;
+        display: flex;
+        align-items: center;
+        position: relative;
+        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
     }
 }