@visns-studio/visns-components 4.5.6 → 4.5.8

package/components/crm/Navigation.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import {
     ArrowCycle,
@@ -31,6 +31,7 @@ import {
     Person,
     Question,
     QuestionFill,
+    Search,
     SettingsVertical,
     ShippingBoxV1,
     SignOut,
@@ -44,16 +45,178 @@ import CustomFetch from './Fetch';
 import Notification from './Notification';
 import styles from './styles/Navigation.module.css';
 
+const SearchComponent = ({
+    navigate,
+    search,
+    setSearch,
+    searchResultShow,
+    searchResult,
+    setSearchResultShow,
+    setSearchResult,
+    navConfig,
+}) => {
+    const searchWrapperRef = useRef(null);
+
+    const handleClickSearch = (url) => {
+        if (url) {
+            setSearchResultShow(false);
+            navigate(url);
+        }
+    };
+
+    const handleKeyPress = (e) => {
+        if (e.key === 'Enter') {
+            fetchSearchResult();
+        }
+    };
+
+    const handleSearch = (e) => {
+        e.preventDefault();
+        fetchSearchResult();
+    };
+
+    const handleSearchChange = (e) => {
+        setSearch(e.target.value);
+    };
+
+    const fetchSearchResult = useCallback(async () => {
+        try {
+            if (search.trim() === '') {
+                setSearchResultShow(false);
+                return;
+            }
+
+            const res = await CustomFetch(navConfig.search.url, 'POST', {
+                search,
+            });
+
+            if (res.data) {
+                const updatedSearchResult = searchResult.map((searchItem) => {
+                    const newData = res.data[searchItem.id] || [];
+                    return {
+                        ...searchItem,
+                        data: newData,
+                    };
+                });
+
+                setSearchResult(updatedSearchResult);
+                setSearchResultShow(true);
+            }
+        } catch (err) {
+            console.error(err);
+        }
+    }, [
+        search,
+        navConfig.search.url,
+        searchResult,
+        setSearchResult,
+        setSearchResultShow,
+    ]);
+
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (
+                searchWrapperRef.current &&
+                !searchWrapperRef.current.contains(event.target)
+            ) {
+                setSearchResultShow(false);
+            }
+        };
+
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [searchWrapperRef, setSearchResultShow]);
+
+    const getNestedValues = (obj, keys) => {
+        return keys
+            .map((key) => obj[key])
+            .filter((value) => value)
+            .join(' ');
+    };
+
+    return (
+        <div className={styles.globalsearch} ref={searchWrapperRef}>
+            <input
+                type="text"
+                placeholder="Search"
+                value={search}
+                onChange={handleSearchChange}
+                onKeyDown={handleKeyPress}
+            />
+            {searchResultShow && (
+                <ul
+                    className={styles['AutocompletePlace-results']}
+                    style={{ marginTop: '40px' }}
+                >
+                    {searchResult.length > 0 &&
+                        searchResult.map(
+                            (searchItem, searchItemKey) =>
+                                searchItem.data.length > 0 && (
+                                    <React.Fragment
+                                        key={`search-category-${searchItem.id}-${searchItemKey}`}
+                                    >
+                                        <li
+                                            className={
+                                                styles[
+                                                    'AutocompletePlace-items'
+                                                ]
+                                            }
+                                        >
+                                            <strong>{searchItem.label}</strong>
+                                        </li>
+                                        <ul>
+                                            {searchItem.data.map((item) => (
+                                                <li
+                                                    key={`${searchItemKey}-${item.id}`}
+                                                    className={
+                                                        styles[
+                                                            'AutocompletePlace-items'
+                                                        ]
+                                                    }
+                                                    onClick={() => {
+                                                        handleClickSearch(
+                                                            `${searchItem.url}${item.id}`
+                                                        );
+                                                    }}
+                                                    data-type={searchItem.id}
+                                                    data-id={item.id}
+                                                >
+                                                    {getNestedValues(
+                                                        item,
+                                                        searchItem.key
+                                                    )}
+                                                </li>
+                                            ))}
+                                        </ul>
+                                    </React.Fragment>
+                                )
+                        )}
+                </ul>
+            )}
+            <button onClick={handleSearch}>
+                <Search strokeWidth={2} size={36} />
+            </button>
+        </div>
+    );
+};
+
 function Navigation({
     children,
     layout = 'full',
     logo,
     navConfig,
-    searchComponent,
     setSystemAuth,
     themeType,
     userProfile,
 }) {
+    const [search, setSearch] = useState('');
+    const [searchResultShow, setSearchResultShow] = useState(false);
+    const [searchResult, setSearchResult] = useState(
+        navConfig.search?.tables || []
+    );
+
     const location = useLocation();
     const navigate = useNavigate();
     const currentPage = location.pathname.substr(1) || 'dashboard';
@@ -61,7 +224,6 @@ function Navigation({
     const [isScrolled, setIsScrolled] = useState(false);
     const [navData, setNavData] = useState(navConfig);
 
-    // const appNavClasses = isScrolled ? styles['app-nav'] : styles['app-nav'];
     const appNavClasses = styles['app-nav'];
 
     const handleLogout = () => {
@@ -150,6 +312,7 @@ function Navigation({
             peopleMultiple: PeopleMultiple,
             question: Question,
             questionFill: QuestionFill,
+            search: Search,
             settingsVertical: SettingsVertical,
             signOut: SignOut,
             shippingBoxV1: ShippingBoxV1,
@@ -160,6 +323,7 @@ function Navigation({
         };
 
         const IconComponent = iconComponents[n.icon];
+
         let navItemClasses;
 
         if (n.class.includes('active')) {
@@ -340,8 +504,8 @@ function Navigation({
             <aside
                 className={
                     isOpen
-                        ? `${styles['aside--cms']}`
-                        : `${styles['aside--cms']} ${styles['aside--cms--open']}`
+                        ? `${styles['aside--cms']} ${styles['aside--cms--open']}`
+                        : `${styles['aside--cms']}`
                 }
             >
                 <div className={styles.logo}>
@@ -366,13 +530,25 @@ function Navigation({
             </aside>
             <main className={styles.content}>
                 <div className={styles['content-header']}>
-                    {searchComponent}
+                    {navConfig.search?.enable === true && (
+                        <SearchComponent
+                            navigate={navigate}
+                            search={search}
+                            setSearch={setSearch}
+                            searchResultShow={searchResultShow}
+                            searchResult={searchResult}
+                            setSearchResultShow={setSearchResultShow}
+                            setSearchResult={setSearchResult}
+                            navConfig={navConfig}
+                        />
+                    )}
+
                     <div className={styles['content-title']}>
                         <button
                             className={
                                 isOpen
-                                    ? `${styles.mobmenu}`
-                                    : `${styles.mobmenu} ${styles['mobmenu--open']}`
+                                    ? `${styles.mobmenu} ${styles['mobmenu--open']}`
+                                    : `${styles.mobmenu}`
                             }
                             onClick={() => setOpen(!isOpen)}
                         >

package/components/crm/auth/styles/Login.module.css

@@ -214,3 +214,32 @@ select:not(:placeholder-shown) + .fi__span {
     background: var(--tertiary-color);
     font-weight: 300;
 }
+
+@media (max-width: 1024px) {
+    body {
+        font-size: 85%;
+    }
+
+    .aside {
+        width: 100%;
+        transform: translateX(-2000px);
+        transition: all 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
+        will-change: transform;
+        z-index: 500;
+    }
+
+    .logincontainer {
+        margin-left: 0;
+        min-height: 100vh;
+        flex-grow: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        align-content: center;
+        flex-wrap: wrap;
+    }
+
+    .login {
+        width: 95%;
+    }
+}

package/components/crm/styles/Navigation.module.css

@@ -575,3 +575,404 @@
         background: rgba(var(--tertiary-color-rgb), 1.05);
     }
 }
+
+@media (max-width: 1600px) {
+    body {
+        font-size: 90%;
+    }
+
+    .grid {
+        width: 100%;
+        max-width: 1150px;
+        margin: 0 auto;
+    }
+}
+
+@media (max-width: 1024px) {
+    body {
+        font-size: 85%;
+    }
+
+    .app-container {
+        width: 100%;
+        min-height: 100vh;
+    }
+
+    .aside--cms {
+        width: 100%;
+        transform: translateX(-2000px);
+        transition: all 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
+        will-change: transform;
+        z-index: 600;
+    }
+
+    .aside--cms--open {
+        transform: translateX(0);
+        transition: all 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
+    }
+
+    .content .content-title .mobmenu {
+        display: block;
+        visibility: visible;
+    }
+
+    .mobmenu {
+        width: 60px;
+        height: 45px;
+        position: absolute;
+        margin: 0;
+        transform: rotate(0deg) scale(0.4);
+        transition: 0.5s ease-in-out;
+        cursor: pointer;
+        border: none;
+        outline: none;
+        background: none;
+        appearance: none;
+        top: 5px;
+        left: 5px;
+        z-index: 999;
+    }
+
+    .mobmenu span {
+        display: block;
+        position: absolute;
+        height: 5px;
+        width: 50%;
+        background: var(--secondary-color);
+        opacity: 1;
+        transform: rotate(0deg);
+        transition: 0.25s ease-in-out;
+    }
+
+    .mobmenu span:nth-child(even) {
+        left: 50%;
+        border-radius: 0 9px 9px 0;
+    }
+
+    .mobmenu span:nth-child(odd) {
+        left: 0px;
+        border-radius: 9px 0 0 9px;
+    }
+
+    .mobmenu span:nth-child(1),
+    .mobmenu span:nth-child(2) {
+        top: 0px;
+    }
+
+    .mobmenu span:nth-child(3),
+    .mobmenu span:nth-child(4) {
+        top: 18px;
+    }
+
+    .mobmenu span:nth-child(5),
+    .mobmenu span:nth-child(6) {
+        top: 36px;
+    }
+
+    .mobmenu--open span:nth-child(1),
+    .mobmenu--open span:nth-child(6) {
+        transform: rotate(45deg);
+    }
+
+    .mobmenu--open span:nth-child(2),
+    .mobmenu--open span:nth-child(5) {
+        transform: rotate(-45deg);
+    }
+
+    .mobmenu--open span:nth-child(1) {
+        left: 5px;
+        top: 7px;
+    }
+
+    .mobmenu--open span:nth-child(2) {
+        left: calc(50% - 5px);
+        top: 7px;
+    }
+
+    .mobmenu--open span:nth-child(3) {
+        left: -50%;
+        opacity: 0;
+    }
+
+    .mobmenu--open span:nth-child(4) {
+        left: 100%;
+        opacity: 0;
+    }
+
+    .mobmenu--open span:nth-child(5) {
+        left: 5px;
+        top: 29px;
+    }
+
+    .mobmenu--open span:nth-child(6) {
+        left: calc(50% - 5px);
+        top: 29px;
+    }
+
+    .content {
+        margin-left: 0;
+    }
+
+    .popup-content {
+        width: 90%;
+    }
+
+    .modalwrap .modal__header .modal__close {
+        padding: 5px;
+    }
+
+    .djobs {
+        flex-wrap: wrap;
+    }
+
+    .djobs__item {
+        width: 100%;
+        padding: 0.25rem 0.25rem;
+    }
+
+    .djobs__item--select {
+        flex-basis: 100%;
+        padding: 0.25rem 0.25rem;
+    }
+
+    .djobs__item--select select {
+        width: 100%;
+        cursor: pointer;
+        font-size: 0.95rem;
+        padding: 0.25rem 0.75rem;
+    }
+
+    .djobs__item--date {
+        flex-basis: 100%;
+        padding: 0.25rem 0.25rem;
+    }
+
+    .djobs__item--date input {
+        width: 100%;
+        cursor: pointer;
+        font-size: 0.95rem;
+        padding: 0.25rem 0.75rem !important;
+    }
+
+    .djobs__item--btns {
+        width: 100%;
+        margin-left: 0;
+        display: flex;
+        flex-wrap: nowrap;
+    }
+
+    .djobs__item--btns button {
+        width: 100%;
+        padding: 0.25rem 0.75rem;
+        font-size: 0.75rem;
+        margin-left: 5px;
+    }
+
+    .dassigned {
+        flex-wrap: wrap;
+    }
+
+    .dassigned__left {
+        flex: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: flex-start;
+        min-height: auto;
+        height: auto;
+        margin-right: 0;
+    }
+
+    .dassigned__left h1 {
+        font-size: 0.85rem;
+        padding: 0.75rem;
+    }
+
+    .dassigned__right {
+        flex: 100%;
+        height: auto;
+        overflow-y: auto;
+    }
+
+    .dassigned__table {
+        width: 100%;
+        display: block;
+    }
+
+    .dassigned__table table tr td {
+        font-size: 0.75rem;
+        padding: 5px 5px 5px 5px;
+    }
+
+    .dassigned__emp {
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    .dassigned__emp h2 {
+        font-size: 1rem;
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: center;
+        width: 100%;
+        padding: 0.25rem;
+        background: rgba(var(--primary-color), 0.15);
+        margin: 0;
+        font-weight: bold;
+        border-bottom: 1px solid #e7e7e7;
+    }
+
+    .dassigned__emp h2 > div {
+        width: max-content;
+        margin-left: auto;
+        display: flex;
+        align-items: center;
+        flex-wrap: nowrap;
+    }
+
+    .dassigned__emp h2 > div small {
+        font-size: 0.7rem;
+        color: var(--paragraph-color);
+        font-weight: 300;
+        display: block;
+        padding-right: 5px;
+    }
+
+    .dassigned__emp h2 > div button {
+        display: flex;
+        align-items: center;
+        appearance: none;
+        border: none;
+        padding: 0;
+        margin: 0;
+        outline: none;
+        background: none;
+    }
+
+    .dassigned__emp h2 > div button svg {
+        width: 100%;
+        max-width: 28px;
+        height: auto;
+    }
+
+    .dassigned__emp h2 > div button .toff {
+        opacity: 0.5;
+    }
+}
+
+@media (max-width: 960px) {
+    .padding {
+        padding: 0.15rem;
+    }
+
+    .userdetails {
+        display: none;
+        visibility: hidden;
+    }
+
+    .subtitle h2 {
+        font-size: 1em;
+        line-height: 1.45;
+    }
+
+    .dashlist a {
+        width: 100%;
+        height: auto;
+        margin: 0.25rem 0 0.25rem 0;
+        padding: 0.65rem;
+    }
+
+    .dashlist a:nth-child(3n) {
+        margin: 0.25rem 0 0.25rem 0;
+    }
+
+    .dashlist a:nth-child(-n + 3) {
+        margin: 0.25rem 0 0.25rem 0;
+    }
+
+    .grid__subcontent {
+        flex: 100%;
+    }
+
+    .pagination {
+        padding: 0 1rem;
+    }
+}
+
+.globalsearch {
+    display: flex;
+    flex-wrap: nowrap;
+    align-content: center;
+    width: 50%;
+
+    button {
+        width: max-content;
+        padding: 0.15rem 0.65rem;
+        margin: 0 0.5rem;
+        border: none;
+        background: var(--primary-color);
+        appearance: none;
+        border-radius: 0.375rem;
+
+        svg {
+            display: block;
+            color: white;
+            width: 100%;
+            max-width: 20px;
+        }
+    }
+}
+
+.AutocompletePlace-results {
+    z-index: 999;
+}
+
+.AutocompletePlace {
+    position: relative;
+
+    > svg {
+        position: absolute;
+        right: 0.5em;
+        top: 0.5em;
+        color: var(--paragraph-color);
+        cursor: pointer;
+    }
+
+    .toggleActive {
+        color: var(--highlight-color);
+    }
+}
+
+.AutocompletePlace-input {
+    padding: 0.65rem 3rem 0.65rem 0.95rem !important;
+    height: 38px;
+}
+
+.AutocompletePlace-results {
+    width: 400px;
+    position: absolute;
+    background-color: white;
+    padding: 0;
+    margin: 0;
+    border: 1px solid rgba(var(--primary-color), 0.25);
+    border-radius: var(--br);
+    overflow: hidden;
+
+    ul {
+        padding: 0;
+        margin: 0;
+    }
+}
+
+.AutocompletePlace-items {
+    list-style: none;
+    border-bottom: 1px solid rgba(var(--primary-color-rgb), 0.1);
+    cursor: pointer;
+    padding: 10px 10px;
+}
+
+.AutocompletePlace-items:hover {
+    background-color: rgba(var(--paragraph-color-rgb), 0.065);
+}

package/package.json

@@ -14,7 +14,7 @@
         "axios": "^1.7.2",
         "dayjs": "^1.11.12",
         "file-saver": "^2.0.5",
-        "framer-motion": "^11.3.8",
+        "framer-motion": "^11.3.19",
         "html-react-parser": "^5.1.12",
         "lodash": "^4.17.21",
         "lodash.debounce": "^4.0.8",
@@ -35,7 +35,7 @@
         "react-quill": "^2.0.0",
         "react-reveal": "^1.2.2",
         "react-select": "^5.8.0",
-        "react-signature-pad-wrapper": "^4.0.1",
+        "react-signature-pad-wrapper": "^4.0.2",
         "react-slugify": "^4.0.1",
         "react-sortable-hoc": "^2.0.0",
         "react-to-print": "^2.15.1",
@@ -58,7 +58,7 @@
         "react-dom": "^17.0.1"
     },
     "name": "@visns-studio/visns-components",
-    "version": "4.5.6",
+    "version": "4.5.8",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "index.js",
     "scripts": {