@visns-studio/visns-components 5.6.7 → 5.6.9

package/package.json

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

package/src/components/crm/TableFilter.jsx

@@ -2,31 +2,86 @@ import React, { useState, useEffect, useRef } from 'react';
 import styles from './styles/TableFilter.module.scss';
 
 function TableFilter({
-    collapsible = false,
     filters,
     setFilters,
     setSettings,
     type,
+    onFilterChange,
 }) {
-    const [visibleChildren, setVisibleChildren] = useState(null);
+    const [visibleChildren, setVisibleChildren] = useState({});
     const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
     const isFirstRender = useRef(true);
 
+    // Initialize visible children for all parent categories
     useEffect(() => {
-        if (
-            isFirstRender.current &&
-            filters.length > 0 &&
-            filters[0].children &&
-            filters[0].children.length > 0
-        ) {
-            setVisibleChildren(filters[0].id);
+        if (isFirstRender.current && filters.length > 0) {
+            const initialVisibleState = {};
+
+            // Find the first parent with isParent=true and set only it to visible
+            let foundFirstParent = false;
+
+            for (const filter of filters) {
+                if (
+                    filter.isParent &&
+                    filter.children &&
+                    filter.children.length > 0
+                ) {
+                    // Only show the first parent's children by default
+                    // and ensure all others are explicitly set to false
+                    initialVisibleState[filter.id] = !foundFirstParent;
+
+                    if (!foundFirstParent) {
+                        foundFirstParent = true;
+                    }
+                }
+            }
+
+            setVisibleChildren(initialVisibleState);
             isFirstRender.current = false;
         }
     }, [filters]);
 
+    // Toggle visibility of children when clicking on a parent
+    // Only one parent can be open at a time
+    const toggleChildren = (parentId) => {
+        setVisibleChildren((prev) => {
+            // If this parent is already open, close it
+            if (prev[parentId]) {
+                return {
+                    ...prev,
+                    [parentId]: false,
+                };
+            }
+
+            // Otherwise, close all parents and open this one
+            const newState = {};
+            Object.keys(prev).forEach((key) => {
+                newState[key] = false;
+            });
+
+            return {
+                ...newState,
+                [parentId]: true,
+            };
+        });
+    };
+
     const filterTable = (e) => {
+        e.preventDefault();
         const { id, parent, filtertype, url, value } = e.target.dataset;
 
+        // If clicking on a parent category, toggle its children visibility
+        if (filtertype === 'parent') {
+            const clickedFilter = filters.find((f) => f.id === id);
+            if (clickedFilter && clickedFilter.isParent) {
+                toggleChildren(id);
+
+                // Don't activate the parent as a filter, but keep processing to update settings
+                // This allows the parent to expand/collapse while still triggering content updates
+            }
+        }
+
+        // Handle filter selection (both parent and child)
         const updateFilter = (filter) => {
             let isActive = false;
 
@@ -39,83 +94,171 @@ function TableFilter({
             const isParent =
                 parent && filtertype === 'children' && filter.id === parent;
 
-            const updatedChildren = isParent
-                ? filter.children.map((child) => ({
-                      ...child,
-                      class: child.id === id ? 'subactivechildren' : '',
-                      show: child.id === id ? true : false,
-                  }))
-                : filter.children
-                ? filter.children.map((child, childKey) => ({
-                      ...child,
-                      class:
-                          childKey === 0 && isActive ? 'subactivechildren' : '',
-                      show: childKey === 0 && isActive ? true : false,
-                  }))
-                : [];
+            // For parent filters
+            if (filter.isParent) {
+                // If this is the clicked parent, expand/collapse it
+                if (filter.id === id && filtertype === 'parent') {
+                    // Update children - don't change their active state
+                    const updatedChildren = filter.children
+                        ? filter.children.map((child) => ({
+                              ...child,
+                              // Preserve existing active state
+                              class: child.class,
+                              show: child.show,
+                          }))
+                        : [];
 
-            return {
-                ...filter,
-                class:
-                    isActive || isParent
+                    return {
+                        ...filter,
+                        // Don't change parent's active state when just expanding/collapsing
+                        class: filter.class,
+                        show: filter.show,
+                        children: updatedChildren,
+                    };
+                }
+                // If this is a parent of a clicked child
+                else if (isParent) {
+                    // Update children - set the clicked child as active
+                    const updatedChildren = filter.children
+                        ? filter.children.map((child) => {
+                              const isActiveChild = child.id === id;
+                              return {
+                                  ...child,
+                                  class: isActiveChild
+                                      ? 'subactivechildren'
+                                      : '',
+                                  show: isActiveChild,
+                                  // Make sure the child has the active state set
+                                  active: isActiveChild,
+                              };
+                          })
+                        : [];
+
+                    return {
+                        ...filter,
+                        // Parent becomes active when its child is selected
+                        class: 'subactive',
+                        show: true,
+                        active: true,
+                        children: updatedChildren,
+                    };
+                }
+                // Other parents - deactivate them and their children
+                else {
+                    const updatedChildren = filter.children
+                        ? filter.children.map((child) => ({
+                              ...child,
+                              class: '',
+                              show: false,
+                              active: false,
+                          }))
+                        : [];
+
+                    return {
+                        ...filter,
+                        class: '',
+                        show: false,
+                        active: false,
+                        children: updatedChildren,
+                    };
+                }
+            }
+            // For non-parent filters (backward compatibility)
+            else {
+                return {
+                    ...filter,
+                    class: isActive
                         ? type === 'simple'
                             ? 'activetab'
                             : 'subactive'
                         : '',
-                show: isActive || isParent,
-                children: updatedChildren,
-            };
+                    show: isActive,
+                    active: isActive,
+                };
+            }
         };
 
-        setFilters((prevFilters) => prevFilters.map(updateFilter));
+        // Calculate the updated filters
+        const updatedFilters = filters.map(updateFilter);
 
-        if (url && url !== '') {
+        // Only navigate to URL if it's provided and not a parent toggle action
+        if (
+            url &&
+            url !== '' &&
+            !(
+                filtertype === 'parent' &&
+                filters.find(
+                    (f) => f.id === id && f.isParent && f.children?.length > 0
+                )
+            )
+        ) {
             window.open(url);
-        } else {
-            if (setSettings) {
-                setSettings((prevState) => {
-                    if (prevState.ajaxSetting) {
-                        let _where = prevState.ajaxSetting.where.reduce(
-                            (acc, a) => {
-                                if (
-                                    a.id === id &&
-                                    !acc.some((b) => b.id === id)
-                                ) {
-                                    acc.push({ id: id, value: value });
-                                } else {
-                                    acc.push(a);
-                                }
-                                return acc;
-                            },
-                            []
-                        );
-
-                        return {
-                            ...prevState,
-                            ajaxSetting: {
-                                ...prevState.ajaxSetting,
-                                where: _where,
-                            },
-                        };
-                    } else {
-                        let w = prevState.where
-                            ? prevState.where.map((a) => {
-                                  if (id === a.id) {
-                                      return { ...a, value: value };
-                                  }
-                                  return a;
-                              })
-                            : [];
-
-                        return { ...prevState, where: w };
-                    }
-                });
+        }
+
+        // Calculate the updated settings
+        let updatedSettings = null;
+
+        if (setSettings) {
+            // For child items or non-parent items, we need to update the filter value
+            if (
+                filtertype === 'children' ||
+                (filtertype === 'parent' &&
+                    !filters.find((f) => f.id === id && f.isParent))
+            ) {
+                // For child filters, we need to update the filter with the child's ID
+                const filterId = id;
+                const filterValue = value || '';
+
+                // Start with the current settings
+                updatedSettings = { ...setSettings._currentValue };
+
+                if (updatedSettings.ajaxSetting) {
+                    // First, remove any existing filters that might conflict
+                    let _where = [...updatedSettings.ajaxSetting.where].filter(
+                        (item) => {
+                            // Keep items that don't match this filter ID
+                            return item.id !== filterId;
+                        }
+                    );
+
+                    // Add the new filter
+                    _where.push({ id: filterId, value: filterValue });
+
+                    updatedSettings = {
+                        ...updatedSettings,
+                        ajaxSetting: {
+                            ...updatedSettings.ajaxSetting,
+                            where: _where,
+                        },
+                    };
+                } else if (updatedSettings.where) {
+                    // Handle the case where we're using 'where' directly instead of ajaxSetting.where
+                    let w = updatedSettings.where
+                        ? [...updatedSettings.where]
+                        : [];
+
+                    // Remove any existing filters that might conflict
+                    w = w.filter((item) => item.id !== filterId);
+
+                    // Add the new filter
+                    w.push({ id: filterId, value: filterValue });
+
+                    updatedSettings = { ...updatedSettings, where: w };
+                }
             }
         }
 
-        // Handle collapsible functionality
-        if (collapsible && filtertype === 'parent') {
-            setVisibleChildren(id);
+        // Use the onFilterChange prop if available, otherwise use the individual setters
+        if (onFilterChange) {
+            onFilterChange(updatedFilters, updatedSettings);
+        } else {
+            // Update the filters
+            setFilters(updatedFilters);
+
+            // Update the settings if needed
+            if (updatedSettings && setSettings) {
+                setSettings(updatedSettings);
+            }
         }
 
         // Close mobile menu after selection on small screens
@@ -123,9 +266,15 @@ function TableFilter({
     };
 
     const renderContent = (d) => {
-        const parentClass = `${styles.link} ${styles[d.class] || ''}`;
+        // Determine if this is a parent category
+        const isParent = d.isParent === true;
+
+        // Set appropriate classes
+        const parentClass = `${isParent ? styles.parentLink : styles.link} ${
+            styles[d.class] || ''
+        }`;
         const childClass = (child) =>
-            `${styles.link} ${styles[child.class] || ''}`;
+            `${styles.childLink} ${styles[child.class] || ''}`;
 
         if (type === 'simple') {
             return (
@@ -143,8 +292,9 @@ function TableFilter({
             );
         } else {
             return (
-                <li>
+                <li className={isParent ? styles.parentItem : ''}>
                     <a
+                        href="#"
                         data-id={d.id}
                         data-filtertype="parent"
                         data-url={d.url || ''}
@@ -153,35 +303,62 @@ function TableFilter({
                         className={parentClass}
                     >
                         {d.label}
+                        {isParent && d.children && d.children.length > 0 && (
+                            <span
+                                className={`${styles.arrow} ${
+                                    visibleChildren[d.id]
+                                        ? styles.arrowDown
+                                        : ''
+                                }`}
+                            >
+                                ▶
+                            </span>
+                        )}
                     </a>
-                    {d.children && d.children.length > 0 && (
-                        <ul
+                    {isParent && d.children && d.children.length > 0 && (
+                        <div
                             className={`${styles.collapsibleMenu} ${
-                                visibleChildren === d.id
-                                    ? styles.visibleMenu
-                                    : ''
+                                visibleChildren[d.id] ? styles.visibleMenu : ''
                             }`}
                         >
-                            {d.children.map((child, key) => (
-                                <li key={`table-filter-child-${d.id}-${key}`}>
-                                    <a
-                                        className={childClass(child)}
-                                        data-id={child.id}
-                                        data-value={
-                                            child.hasOwnProperty('value')
-                                                ? child.value
-                                                : ''
-                                        }
-                                        data-url={child.url || ''}
-                                        data-filtertype="children"
-                                        data-parent={d.id}
-                                        onClick={filterTable}
+                            <ul
+                                style={{
+                                    listStyle: 'none',
+                                    padding: 0,
+                                    margin: 0,
+                                }}
+                            >
+                                {d.children.map((child, key) => (
+                                    <li
+                                        key={`table-filter-child-${d.id}-${key}`}
+                                        className={styles.childItem}
                                     >
-                                        {child.label}
-                                    </a>
-                                </li>
-                            ))}
-                        </ul>
+                                        <a
+                                            href="#"
+                                            className={childClass(child)}
+                                            data-id={child.id}
+                                            data-value={
+                                                child.hasOwnProperty('value')
+                                                    ? child.value
+                                                    : ''
+                                            }
+                                            data-url={child.url || ''}
+                                            data-filtertype="children"
+                                            data-parent={d.id}
+                                            onClick={(e) => {
+                                                // Make sure the parent is expanded when a child is clicked
+                                                if (!visibleChildren[d.id]) {
+                                                    toggleChildren(d.id);
+                                                }
+                                                filterTable(e);
+                                            }}
+                                        >
+                                            {child.label}
+                                        </a>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
                     )}
                 </li>
             );
@@ -193,7 +370,15 @@ function TableFilter({
     };
 
     // Find active filter for mobile display
-    const activeFilter = filters.find((filter) => filter.show === true);
+    const activeFilter = filters.find((filter) => {
+        if (filter.isParent) {
+            return (
+                filter.children && filter.children.some((child) => child.show)
+            );
+        }
+        return filter.show === true;
+    });
+
     const activeLabel = activeFilter ? activeFilter.label : 'Select Option';
 
     return (

package/src/components/crm/auth/Login.jsx

@@ -28,20 +28,11 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
     });
 
     const renderSsoButton = () => {
-        let content =
-            providers && providers.length > 0 ? (
-                <div className="formItem fwItem lastItem forgotten">
-                    <span
-                        style={{
-                            display: 'block',
-                            textAlign: 'center',
-                            width: '100%',
-                        }}
-                    >
-                        OR
-                    </span>
-                </div>
-            ) : null;
+        if (!providers || providers.length === 0) {
+            return null;
+        }
+
+        let content = <div className={styles.divider}>OR</div>;
 
         if (providers) {
             providers.forEach((provider) => {
@@ -51,13 +42,12 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
                             <>
                                 {content}
                                 <div
-                                    className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem} ${styles.forgotten}`}
+                                    className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem}`}
                                 >
                                     <button
-                                        className={styles.btn}
+                                        className={styles.ssoButton}
                                         onClick={(e) => {
                                             e.preventDefault();
-
                                             window.location.href =
                                                 '/auth/azure';
                                         }}
@@ -66,10 +56,11 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
                                             src={
                                                 'https://d16lktya8ojp5z.cloudfront.net/generic/images/microsoft.png'
                                             }
-                                            width="13px"
-                                            height="13px"
-                                        />{' '}
-                                        Microsoft
+                                            width="18px"
+                                            height="18px"
+                                            alt="Microsoft logo"
+                                        />
+                                        Sign in with Microsoft
                                     </button>
                                 </div>
                             </>
@@ -182,6 +173,17 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
                                     alt="CRM"
                                     className={styles.loginlogo}
                                 />
+                                <h2
+                                    style={{
+                                        textAlign: 'center',
+                                        marginBottom: '1.5rem',
+                                        color: '#111827',
+                                        fontWeight: '600',
+                                        fontSize: '1.5rem',
+                                    }}
+                                >
+                                    Sign in to your account
+                                </h2>
                                 <div
                                     className={`${styles.formItem} ${styles.fwItem}`}
                                 >
@@ -232,9 +234,10 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
                                 >
                                     <div className={styles.rememberMeContainer}>
                                         <div
-                                            className={
-                                                styles.rememberMeCheckboxWrapper
-                                            }
+                                            style={{
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                            }}
                                         >
                                             <input
                                                 type="checkbox"
@@ -246,13 +249,28 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
                                                     styles.rememberMeCheckbox
                                                 }
                                             />
+                                            <label
+                                                htmlFor="rememberMe"
+                                                className={
+                                                    styles.rememberMeLabel
+                                                }
+                                            >
+                                                Remember me
+                                            </label>
+                                        </div>
+                                        <div>
+                                            <Link
+                                                to="/reset"
+                                                style={{
+                                                    color: 'var(--primary-color, #4f46e5)',
+                                                    textDecoration: 'none',
+                                                    fontWeight: '500',
+                                                    fontSize: '0.875rem',
+                                                }}
+                                            >
+                                                Forgot password?
+                                            </Link>
                                         </div>
-                                        <label
-                                            htmlFor="rememberMe"
-                                            className={styles.rememberMeLabel}
-                                        >
-                                            Remember me
-                                        </label>
                                     </div>
                                 </div>
                                 <div
@@ -263,17 +281,11 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
                                         type="submit"
                                         disabled={isLoading}
                                     >
-                                        {isLoading ? 'Logging in...' : 'Login'}
+                                        {isLoading
+                                            ? 'Signing in...'
+                                            : 'Sign in'}
                                     </button>
                                 </div>
-                                <div
-                                    className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem} ${styles.forgotten}`}
-                                >
-                                    <span>
-                                        Forgot your password?{' '}
-                                        <Link to="/reset">Click Here</Link>
-                                    </span>
-                                </div>
                                 {renderSsoButton()}
                             </div>
                         </Reveal>

package/src/components/crm/auth/Reset.jsx

@@ -53,11 +53,17 @@ const Reset = ({ logo }) => {
                                     alt="CRM"
                                     className={styles.loginlogo}
                                 />
-                                <div
-                                    className={`${styles.formItem} ${styles.fwItem}`}
+                                <h2
+                                    style={{
+                                        textAlign: 'center',
+                                        marginBottom: '1.5rem',
+                                        color: '#111827',
+                                        fontWeight: '600',
+                                        fontSize: '1.5rem',
+                                    }}
                                 >
-                                    <h1>Forgot your password?</h1>
-                                </div>
+                                    Forgot your password?
+                                </h2>
                                 <div
                                     className={`${styles.formItem} ${styles.fwItem}`}
                                 >
@@ -89,7 +95,7 @@ const Reset = ({ logo }) => {
                                         type="submit"
                                         tabIndex="2"
                                     >
-                                        Reset Password
+                                        Send Reset Link
                                     </button>
                                 </div>
                             </div>