@visns-studio/visns-components 5.0.29 → 5.1.0

package/package.json

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

package/src/components/crm/DataGrid.jsx

@@ -2009,7 +2009,10 @@ const DataGrid = forwardRef(
                                                     }
                                                 }
 
-                                                if (typeof value === 'string') {
+                                                if (
+                                                    typeof value === 'string' ||
+                                                    typeof value === 'number'
+                                                ) {
                                                     return <span>{value}</span>;
                                                 } else {
                                                     return null;

package/src/components/crm/Navigation.jsx

@@ -4,6 +4,7 @@ import {
     Bug,
     Calendar,
     Draft,
+    PeopleGroup,
     Person,
     Search,
     SignOut,
@@ -207,11 +208,18 @@ function Navigation({
             bug: Bug,
             calendar: Calendar,
             draft: Draft,
+            peopleGroup: PeopleGroup,
             person: Person,
             shield: Shield,
             signOut: SignOut,
         };
 
+        // Check if the setting's URL matches the current page
+        const isActive = n.url && n.url === `/${currentPage}`;
+
+        // Add active class if the setting is active
+        const activeClass = isActive ? styles.active : '';
+
         if (n.id === 'notifications') {
             return (
                 <li>
@@ -237,6 +245,7 @@ function Navigation({
                         data-tooltip-id="system-tooltip"
                         data-tooltip-content={n.label}
                         onClick={handleLogout}
+                        className={activeClass} // Add active class to the logout button
                     >
                         <IconComponent size={19} strokeWidth={2} />
                     </button>
@@ -246,12 +255,14 @@ function Navigation({
             const IconComponent = iconComponents[n.icon];
 
             return (
-                <li>
+                <li className={activeClass}>
+                    {' '}
+                    {/* Apply active class to the list item */}
                     <Link
                         to={n.url}
                         data-tooltip-id="system-tooltip"
                         data-tooltip-content={n.label}
-                        className="tooltip"
+                        className={`tooltip ${activeClass}`} // Apply active class to the link
                         target={n.target ? n.target : '_self'}
                     >
                         <IconComponent size={19} strokeWidth={2} />
@@ -387,30 +398,51 @@ function Navigation({
     useEffect(() => {
         setNavData((prevNavData) => {
             const updateNavItems = (nav) => {
-                const cleanUrl = (url) =>
-                    url && url.startsWith('/')
-                        ? url.substr(1).split('/')[0]
-                        : url
-                        ? url.split('/')[0]
-                        : '';
+                const cleanUrl = (url) => {
+                    if (url) {
+                        // Ensure the URL starts with a slash. If it doesn't, prepend it.
+                        return url.startsWith('/') ? url : `/${url}`;
+                    }
+                    return '';
+                };
+
+                // Ensure both URLs have the leading slash for consistent comparison
                 const currentUrl = cleanUrl(currentPage);
-                const navUrl = nav.url
-                    ? cleanUrl(nav.url)
-                        ? cleanUrl(nav.url)
-                        : 'dashboard'
-                    : '';
+                const navUrl = nav.url ? cleanUrl(nav.url) : 'dashboard';
 
+                // Split current URL into segments
+                const currentUrlSegments = currentUrl
+                    .split('/')
+                    .filter(Boolean);
+
+                // Handle the case where navUrl is just '/'
                 if (
-                    navUrl === currentUrl ||
-                    (nav.children &&
-                        nav.children.some(
-                            (child) => child.url === `/${currentPage}`
-                        ))
+                    navUrl === '/' &&
+                    (currentUrl === '/dashboard' || currentUrl === '/')
                 ) {
-                    return { ...nav, class: 'nav-item active' };
+                    return { ...nav, class: 'nav-item active' }; // Mark as active for dashboard if navUrl is '/'
+                }
+
+                // If current URL has 2 or fewer segments, check if navUrl is contained in currentUrl
+                if (currentUrlSegments.length <= 2) {
+                    if (currentUrl.includes(navUrl) && nav.id !== 'dashboard') {
+                        return { ...nav, class: 'nav-item active' }; // Mark as active if contained
+                    }
                 } else {
-                    return { ...nav, class: 'nav-item' };
+                    // If more than 2 segments, use exact match logic
+                    if (
+                        navUrl === currentUrl ||
+                        (nav.children &&
+                            nav.children.some(
+                                (child) =>
+                                    cleanUrl(child.url) === `/${currentPage}`
+                            ))
+                    ) {
+                        return { ...nav, class: 'nav-item active' }; // Mark as active
+                    }
                 }
+
+                return { ...nav, class: 'nav-item' }; // Default class
             };
 
             return {

package/src/components/crm/QuickAction.jsx

@@ -6,292 +6,119 @@ import { Search } from 'akar-icons';
 import CustomFetch from './Fetch';
 import Form from './Form';
 
-const QuickAction = ({ childRef, navConfig }) => {
+import styles from './styles/QuickAction.module.scss';
+
+const QuickAction = ({ childRef, setting }) => {
     const navigate = useNavigate();
     const location = useLocation();
     const searchBarRef = useRef(null);
 
-    /** Modal Contact */
-    const [contactModalShow, setContactModalShow] = useState(false);
-    const [contactFormType, setContactFormType] = useState('create');
-    const [contactFormId, setContactFormId] = useState(0);
-    const [contactForm, setContactForm] = useState({
-        primaryKey: 'id',
-        url: '/ajax/contacts',
-        create: {
-            title: 'Create a new Contact entry',
-        },
-        update: {
-            title: 'Update an Existing Contact entry',
-        },
-        fields: [
-            {
-                id: 'id',
-                label: 'ID',
-                type: 'hidden',
-                required: false,
-                size: 'half',
-            },
-            {
-                id: 'title',
-                label: 'Title',
-                type: 'text',
-                required: false,
-                size: 'full',
-            },
-            {
-                id: 'firstname',
-                label: 'Firstname',
-                type: 'text',
-                required: true,
-                size: 'half',
-            },
-            {
-                id: 'surname',
-                label: 'Surname',
-                type: 'text',
-                required: true,
-                size: 'half',
-            },
-            {
-                id: 'address1',
-                label: 'Address',
-                type: 'json',
-                parent: 'address',
-                required: false,
-                size: 'half',
-            },
-            {
-                id: 'suburb',
-                label: 'Suburb',
-                type: 'json',
-                parent: 'address',
-                required: false,
-                size: 'half',
-            },
-            {
-                id: 'postcode',
-                label: 'Postcode',
-                type: 'json',
-                parent: 'address',
-                required: false,
-                size: 'half',
-            },
-            {
-                id: 'state',
-                label: 'State',
-                type: 'json',
-                parent: 'address',
-                required: false,
-                size: 'half',
-            },
-            {
-                id: 'phone',
-                label: 'Phone',
-                type: 'phone',
-                required: false,
-                size: 'half',
-            },
-            {
-                id: 'mobile',
-                label: 'mobile',
-                type: 'mobile',
-                required: false,
-                size: 'half',
-            },
-            {
-                id: 'fax',
-                label: 'Fax',
-                type: 'phone',
-                required: false,
-                size: 'half',
-            },
-            {
-                id: 'email',
-                label: 'Email',
-                type: 'text',
-                required: false,
-                size: 'half',
-            },
-            {
-                id: 'client_id',
-                label: 'User',
-                type: 'multi-dropdown-ajax',
-                url: '/ajax/clients/dropdown',
-                relation: ['client'],
-                relationName: 'name',
-                required: false,
-                size: 'half',
-            },
-            {
-                id: 'position',
-                label: 'Position',
-                type: 'text',
-                required: false,
-                size: 'half',
-            },
-            {
-                id: 'contact_types',
-                label: 'Role Type (Select Applicable)',
-                type: 'multi-dropdown-ajax',
-                url: '/ajax/contactTypes/dropdown',
-                required: false,
-                multi: true,
-                size: 'half',
-            },
-            {
-                id: 'contacts_industries',
-                label: 'Sector (Select Applicable)',
-                type: 'multi-dropdown-ajax',
-                url: '/ajax/industries/dropdown',
-                required: true,
-                multi: true,
-                size: 'half',
-            },
-            {
-                id: 'stakeholder_type_id',
-                label: 'Stakeholder Type',
-                type: 'dropdown-ajax',
-                url: '/ajax/stakeholderTypes/dropdown',
-                where: [],
-                child: {
-                    id: 'stakeholder_category_id',
-                    url: '/ajax/stakeholderCategories/dropdown',
-                },
-                relation: ['stakeholderTypes'],
-                relation_from: 'id',
-                required: false,
-                size: 'half',
-            },
-            {
-                id: 'stakeholder_category_id',
-                label: 'Stakeholder Category',
-                type: 'dropdown',
-                options: [],
-                required: false,
-                size: 'half',
-            },
-            {
-                id: 'bio',
-                label: 'Bio',
-                type: 'richeditor',
-                required: false,
-                size: 'full',
-            },
-        ],
-    });
+    /** State Variables */
+    const [search, setSearch] = useState('');
+    const [searchResults, setSearchResults] = useState([]);
+    const [showSearchResults, setShowSearchResults] = useState(false);
+    const [modalShow, setModalShow] = useState(false);
+    const [formType, setFormType] = useState('create');
+    const [formId, setFormId] = useState(0);
+    const [form, setForm] = useState({});
 
-    const contactModalClose = (e) => {
-        setContactModalShow(false);
+    /** Helper Functions */
+    const fetchSearchResults = async () => {
+        try {
+            const res = await CustomFetch(setting.search.url, 'POST', {
+                search,
+            });
+            setSearchResults(res.data);
+            setSearch('');
+        } catch (e) {
+            console.error(e);
+        }
     };
 
-    const contactModalOpen = (ft, fi) => {
-        setContactModalShow(true);
-        setContactFormType(ft);
-        setContactFormId(fi);
+    const handleSearch = (e) => {
+        const value = e.target.value;
+        setSearch(value);
+        if (e.key === 'Enter') fetchSearchResults();
     };
 
-    const contactChildDropdownCallback = (data) => {
-        let _form = contactForm;
-
-        contactForm.fields.map((a, b) => {
-            if (a.id === data.id) {
-                _form.fields[b].options = data.data;
+    const handleSelectResult = (type, result) => {
+        const url = setting.search.types.find((t) => t.title === type)?.url;
+        if (url) {
+            const key = setting.search.types.find((t) => t.title === type)?.key;
+            if (key && result[key]) {
+                navigate(`${url}/${result[key]}`);
+            } else {
+                navigate(url);
             }
-        });
-
-        setContactForm(() => ({
-            ..._form,
-        }));
+        }
+        setSearchResults([]);
     };
 
-    /** Modal Client */
-    const [clientModalShow, setClientModalShow] = useState(false);
-    const [clientFormType, setClientFormType] = useState('create');
-    const [clientFormId, setClientFormId] = useState(0);
-    const [clientForm, setClientForm] = useState({
-        primaryKey: 'id',
-        url: '/ajax/clients',
-        create: {
-            title: 'Create a new User entry',
-        },
-        update: {
-            title: 'Update an Existing User entry',
-        },
-        fields: [
-            {
-                id: 'id',
-                label: 'ID',
-                type: 'hidden',
-                required: false,
-                size: 'half',
-            },
-            {
-                id: 'name',
-                label: 'Name',
-                type: 'text',
-                required: true,
-                size: 'half',
-            },
-            {
-                id: 'abn',
-                label: 'ABN',
-                type: 'text',
-                required: false,
-                size: 'half',
-            },
-            {
-                id: 'notes',
-                label: 'Notes',
-                type: 'textarea',
-                required: false,
-                size: 'full',
-            },
-        ],
-    });
-
-    const clientModalClose = (e) => {
-        setClientModalShow(false);
+    const handleButtonClick = (buttonSetting) => {
+        // Check if the form object is identical to the current form
+        if (JSON.stringify(buttonSetting.form) === JSON.stringify(form)) {
+            modalOpen('create', 0); // Call modalOpen if they are the same
+        } else {
+            setForm(buttonSetting.form); // Otherwise, update the form state
+        }
     };
 
-    const clientModalOpen = (ft, fi) => {
-        setClientModalShow(true);
-        setClientFormType(ft);
-        setClientFormId(fi);
+    const modalClose = () => setModalShow(false);
+    const modalOpen = (ft, fi) => {
+        setModalShow(true);
+        setFormType(ft);
+        setFormId(fi);
     };
 
-    const clientChildDropdownCallback = (data) => {
-        let _form = clientForm;
-
-        clientForm.fields.map((a, b) => {
-            if (a.id === data.id) {
-                _form.fields[b].options = data.data;
-            }
+    const childDropdownCallback = (data) => {
+        setForm((prevForm) => {
+            const updatedFields = prevForm.fields.map((field) =>
+                field.id === data.id ? { ...field, options: data.data } : field
+            );
+            return { ...prevForm, fields: updatedFields };
         });
-
-        setClientForm(() => ({
-            ..._form,
-        }));
     };
 
-    /** Universal Search */
-    const [search, setSearch] = useState('');
-    const [searchResults, setSearchResults] = useState([]);
-    const [showSearchResults, setShowSearchResults] = useState(false);
+    /** Effect Hooks */
+    useEffect(() => {
+        if (form?.fields?.length) {
+            modalOpen('create', 0);
+        }
+    }, [form]);
+
+    useEffect(() => {
+        const hasSearchResults = setting.search.types.some(
+            (type) => searchResults[type.id]?.length > 0
+        );
+        setShowSearchResults(hasSearchResults);
+    }, [searchResults]);
 
-    const ResultSection = ({ title, data, handleSelectResult }) => {
-        if (data === null || data === undefined || data?.length === 0)
-            return null;
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (
+                searchBarRef.current &&
+                !searchBarRef.current.contains(event.target)
+            ) {
+                setShowSearchResults(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () =>
+            document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
 
+    /** Component Structure */
+    const ResultSection = ({ title, data }) => {
+        if (!data?.length) return null;
         return (
             <>
-                <div className="resultItem">
+                <div className={styles.resultItem}>
                     <h3>{title}</h3>
                 </div>
                 {data.map((result) => (
                     <div
                         key={result.id}
-                        className="resultItem"
+                        className={styles.resultItem}
                         onClick={() => handleSelectResult(title, result)}
                     >
                         <p>
@@ -305,110 +132,26 @@ const QuickAction = ({ childRef, navConfig }) => {
         );
     };
 
-    const handleSearch = (e) => {
-        setSearchResults([]);
-        setSearch(e.target.value);
-
-        if (e.key === 'Enter') {
-            // Check if the Enter key was pressed
-            fetchSearchResults();
-        }
-    };
-
-    const handleSelectResult = (type, d) => {
-        switch (type) {
-            case 'Contacts':
-                navigate(`/contacts`);
-                break;
-            case 'Enquiries':
-                navigate(`/leads/${d.id}`);
-                break;
-            case 'Users':
-                navigate(`/clients/${d.id}`);
-                break;
-        }
-        setSearchResults([]);
-    };
-
-    const fetchSearchResults = async () => {
-        try {
-            const res = await CustomFetch('/ajax/dashboard/search', 'POST', {
-                search,
-            });
-
-            setSearchResults(res.data);
-            setSearch('');
-        } catch (e) {
-            console.log(e);
-        }
-    };
-
-    useEffect(() => {
-        let ssr = false;
-
-        if (searchResults?.contacts?.length > 0) {
-            ssr = true;
-        }
-
-        if (searchResults?.enquiries?.length > 0) {
-            ssr = true;
-        }
-
-        if (searchResults?.users?.length > 0) {
-            ssr = true;
-        }
-
-        setShowSearchResults(ssr);
-    }, [searchResults]);
-
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (
-                searchBarRef.current &&
-                !searchBarRef.current.contains(event.target)
-            ) {
-                setShowSearchResults(false);
-            }
-        };
-
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, []);
-
     return (
         <>
-            <div className="quickActions">
+            <div className={styles.quickActions}>
                 <span>Quick Actions</span>
-                <button
-                    onClick={() => {
-                        navigate('/leads/create');
-                    }}
-                >
-                    New Enquiry
-                </button>
-                <button
-                    onClick={() => {
-                        clientModalOpen('create', 0);
-                    }}
-                >
-                    New User
-                </button>
-                <button
-                    onClick={() => {
-                        if (location.pathname === '/leads/create') {
-                            console.info('aa');
-                            childRef.current.contactOpen();
-                        } else {
-                            contactModalOpen('create', 0);
-                        }
-                    }}
-                >
-                    New Contact
-                </button>
+                {setting.buttons.map((b) => (
+                    <button
+                        key={`button-${b.id}`}
+                        onClick={() => {
+                            if (b.url) {
+                                navigate(b.url);
+                            } else {
+                                handleButtonClick(b);
+                            }
+                        }}
+                    >
+                        {b.label}
+                    </button>
+                ))}
 
-                <div className="searchBar" ref={searchBarRef}>
+                <div className={styles.searchBar} ref={searchBarRef}>
                     <input
                         type="text"
                         placeholder="Search..."
@@ -416,56 +159,36 @@ const QuickAction = ({ childRef, navConfig }) => {
                         onChange={handleSearch}
                         onKeyDown={handleSearch}
                     />
-
-                    <div className="iconContainer">
+                    <div className={styles.iconContainer}>
                         <Search
                             strokeWidth={2}
                             size={18}
-                            className="searchIcon"
+                            className={styles.searchIcon}
                         />
                     </div>
 
                     {showSearchResults && (
-                        <div className="searchResults">
-                            <ResultSection
-                                title="Contacts"
-                                data={searchResults.contacts}
-                                handleSelectResult={handleSelectResult}
-                            />
-                            <ResultSection
-                                title="Enquiries"
-                                data={searchResults.enquiries}
-                                handleSelectResult={handleSelectResult}
-                            />
-                            <ResultSection
-                                title="Users"
-                                data={searchResults.users}
-                                handleSelectResult={handleSelectResult}
-                            />
+                        <div className={styles.searchResults}>
+                            {setting.search.types.map((t) => (
+                                <ResultSection
+                                    key={t.id}
+                                    title={t.title}
+                                    data={searchResults[t.id]}
+                                />
+                            ))}
                         </div>
                     )}
                 </div>
             </div>
 
-            <Popup open={contactModalShow} onClose={contactModalClose}>
-                <Form
-                    closeModal={contactModalClose}
-                    fetchTable={() => {}}
-                    formSettings={contactForm}
-                    formType={contactFormType}
-                    columnId={contactFormId}
-                    childDropdownCallback={contactChildDropdownCallback}
-                />
-            </Popup>
-
-            <Popup open={clientModalShow} onClose={clientModalClose}>
+            <Popup open={modalShow} onClose={modalClose}>
                 <Form
-                    closeModal={clientModalClose}
+                    closeModal={modalClose}
                     fetchTable={() => {}}
-                    formSettings={clientForm}
-                    formType={clientFormType}
-                    columnId={clientFormId}
-                    childDropdownCallback={clientChildDropdownCallback}
+                    formSettings={form}
+                    formType={formType}
+                    columnId={formId}
+                    childDropdownCallback={childDropdownCallback}
                 />
             </Popup>
         </>

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

@@ -1,7 +1,7 @@
 import '../../styles/global.css';
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Outlet } from 'react-router-dom';
+import { useParams, Outlet } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { saveAs } from 'file-saver';
 import _ from 'lodash';
@@ -182,7 +182,9 @@ function GenericIndex({
     userProfile,
 }) {
     const gridRef = useRef(null);
+    const params = useParams();
     const [rowsSelected, setRowsSelected] = useState({});
+    const [tableInfo, setTableInfo] = useState({});
     const [total, setTotal] = useState(0);
     const windowHeight = useWindowHeight();
     const { config, setConfig, subnav, setSubnav } = useConfig(
@@ -370,6 +372,28 @@ function GenericIndex({
         }
     }, [layout, subnav, setSubnav, setConfig, renderTable]);
 
+    useEffect(() => {
+        if (setting.page?.tableInfo?.hasOwnProperty('url')) {
+            const fetchTableInfo = async () => {
+                try {
+                    const res = await CustomFetch(
+                        setting.page.tableInfo.url,
+                        'POST',
+                        {}
+                    );
+
+                    if (res.data) {
+                        setTableInfo(res.data);
+                    }
+                } catch (error) {
+                    console.error(error);
+                }
+            };
+
+            fetchTableInfo();
+        }
+    }, [setting]);
+
     useEffect(() => {
         if (setActiveNav) {
             setActiveNav();
@@ -389,6 +413,16 @@ function GenericIndex({
                     >
                         <h1>{setting.page?.title}</h1>
                         <div className={styles.titleInfo}>
+                            {setting.page?.tableInfo?.hasOwnProperty(
+                                'heading'
+                            ) &&
+                                setting.page.tableInfo.heading.length > 0 &&
+                                setting.page.tableInfo.heading.map((h) => (
+                                    <span>
+                                        [<strong>{tableInfo[h.id]}</strong>{' '}
+                                        {h.label}]{' '}
+                                    </span>
+                                ))}
                             <span>
                                 [<strong>{total}</strong> Total{' '}
                                 {setting.page?.title}]

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

@@ -6,6 +6,7 @@ import { Routes, Route, Navigate } from 'react-router-dom';
 import Call from '../Call';
 import Loader from '../Loader';
 import Navigation from '../Navigation';
+import QuickAction from '../QuickAction';
 
 import styles from './styles/GenericMain.module.scss';
 
@@ -85,6 +86,9 @@ const GenericMain = ({
                     userProfile={userProfile}
                 />
             </header>
+            {navigation.hasOwnProperty('quickActions') && (
+                <QuickAction setting={navigation.quickActions} />
+            )}
             <main className={styles.content}>
                 <div className={styles['content-main']} id="app">
                     <div className={styles.padding}>

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

@@ -240,7 +240,7 @@ input[type='file'] {
     position: relative;
     padding: 0.75rem;
     max-height: 80vh;
-    // overflow-y: auto;
+    overflow-y: auto;
 
     .btn {
         background: var(--primary-color);

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

@@ -61,7 +61,7 @@
 
         a,
         span {
-            font-size: 1rem;
+            font-size: 0.9rem;
             display: flex;
             flex-wrap: nowrap;
             align-items: center;
@@ -260,7 +260,8 @@
             display: flex;
             align-items: center;
 
-            &:hover {
+            &:hover,
+            &.active {
                 background: var(--primary-color);
 
                 svg {
@@ -283,7 +284,8 @@
             outline: none;
             appearance: none;
 
-            &:hover {
+            &:hover,
+            &.active {
                 background: var(--primary-color);
 
                 svg {

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

@@ -0,0 +1,126 @@
+.quickActions {
+    width: 100%;
+    background: rgba(var(--bg-rgb), 0.95);
+    padding: var(--padding);
+    border-top: solid 4px rgba(var(--bg-rgb), 1.05);
+    border-bottom: solid 1px rgba(var(--primary-rgb), 0.25);
+    color: var(--paragraph-color);
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+
+    > span {
+        width: max-content;
+        display: block;
+        font-weight: var(--title-weight);
+        padding: 0 1rem 0 0;
+    }
+
+    > button {
+        appearance: none;
+        border: 1px solid rgba(var(--primary-rgb), 0.25);
+        border-radius: var(--br);
+        background: transparent;
+        width: max-content;
+        color: var(--paragraph-color);
+        padding: 0.35rem 0.65rem;
+        margin: 0 0.25rem;
+        transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
+
+        &:hover {
+            background: var(--tertiary-color);
+            transform: translateY(-2px);
+        }
+    }
+
+    .searchBar {
+        display: flex;
+        align-items: center;
+        background: transparent;
+        margin: 0 0.25rem;
+        flex-grow: 1;
+        position: relative;
+
+        input[type='text'] {
+            flex-grow: 1;
+            border: none;
+            outline: none;
+            padding: 4px 0.65rem;
+            padding-right: 30px;
+            border-radius: var(--br);
+            height: 32px;
+            font-size: 14px;
+            width: 100%;
+            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
+
+            &:focus {
+                box-shadow: 0 0 8px rgba(var(--primary-rgb), 0.5);
+            }
+        }
+
+        .iconContainer {
+            position: absolute;
+            right: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .searchIcon {
+            width: 20px;
+            height: 20px;
+        }
+    }
+
+    .searchResults {
+        position: absolute;
+        top: 100%;
+        width: 100%;
+        background: var(--third-color);
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+        z-index: 100;
+        max-height: 400px;
+        overflow-y: auto;
+        border-radius: var(--br);
+        margin-top: 5px;
+    }
+
+    .resultItem {
+        padding: 0.5rem 1rem;
+        cursor: pointer;
+        transition: background-color 0.3s ease, transform 0.2s ease;
+
+        &:hover {
+            background-color: #f2f2f2;
+            transform: translateX(5px);
+        }
+
+        &:last-child {
+            border-bottom: none;
+        }
+
+        h3 {
+            margin: 0;
+            font-weight: var(--title-weight);
+            color: var(--header-color);
+            font-size: 14px;
+        }
+
+        p {
+            margin: 0.25rem 0 0;
+            color: var(--paragraph-color);
+            font-size: 13px;
+        }
+
+        &.selected {
+            background-color: rgba(var(--primary-rgb), 0.1);
+        }
+    }
+
+    .resultItemDivider {
+        height: 1px;
+        background-color: var(--border-color);
+        margin: 0.25rem 0;
+    }
+}