*/}\n
\n
\n {username[0].toUpperCase() + username.slice(1, 7).toLowerCase()}\n
\n
\n {username[0].toUpperCase() + username.slice(1).toLowerCase()}\n
\n
\n
\n \n \n
\n \n \n \n {/* \n Profile options
\n \n
e.preventDefault()}\n id=\"ChangeSettingsTooltip\">\n \n Change settings\n \n */}\n \n dispatch(logout())}>Salir de PrestaDin \n \n {/* \n e.preventDefault()}>\n My Account\n \n \n \n e.preventDefault()}>\n Profile settings\n \n \n \n e.preventDefault()}>\n Active tasks\n \n */}\n \n \n {/* \n \n
\n
\n
\n
\n
\n
\n $9,693 \n revenue \n
\n
\n
\n
\n
\n \n e.preventDefault()}\n color=\"facebook\"\n className=\"d-40 btn-icon p-0\"\n id=\"FacebookTooltipHeader\"\n container=\"body\">\n \n \n \n \n Facebook\n \n e.preventDefault()}\n color=\"dribbble\"\n className=\"mx-2 d-40 btn-icon p-0\"\n id=\"btnDribbbleTooltipHeader\"\n container=\"body\">\n \n \n \n \n Dribbble\n \n e.preventDefault()}\n color=\"twitter\"\n className=\"d-40 btn-icon p-0\"\n id=\"btnTwitterTooltipHeader\"\n container=\"body\">\n \n \n \n \n Twitter\n \n */}\n \n \n \n \n )\n}\n\nexport default HeaderUserbox\n","import React, { useState, useEffect, useMemo, useCallback } from 'react'\nimport DataListInput from 'react-datalist-input'\nimport axios from 'axios'\nimport clsx from 'clsx'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { connect, useSelector } from 'react-redux'\nimport { setHeaderSearchHover } from '../../reducers/ThemeOptions'\nimport removeAccents from 'remove-accents'\n\n// Router\nimport { useNavigate } from 'react-router-dom'\n\nconst HeaderSearch = props => {\n const { employee } = useSelector(state => state.auth)\n\n const navigate = useNavigate()\n const { headerSearchHover, setHeaderSearchHover } = props\n\n const [customers, setCustomers] = useState([])\n\n const [userId, setUserId] = useState()\n\n const [openMouseOver, setOpenMouseOver] = useState(true)\n\n // const toggleHeaderSearchHover = () => {\n // setHeaderSearchHover(!headerSearchHover);\n // };\n\n const fetchCustomers = async () => {\n const url = `${process.env.REACT_APP_API}/user/list/customers/${employee.company._id}/${employee._id}`\n\n const { data } = await axios.get(url)\n setCustomers(data.data)\n }\n\n useEffect(() => {\n fetchCustomers()\n }, [])\n\n const onSelect = selectedItem => {\n setUserId(selectedItem.id)\n\n if (selectedItem.id) {\n navigate(`/dashboard/customer/profile/${selectedItem.label.split(' ').join('_')}`, {\n state: { userId: selectedItem.id },\n })\n }\n }\n\n const items = useMemo(\n () =>\n [...customers, { name: '', _id: '' }].map((item, index) => ({\n label: removeAccents(item.name),\n key: index,\n id: item._id,\n })),\n [[...customers, { name: '', _id: '' }]]\n )\n\n // const handleMouseUp = () => {\n // fetchCustomers()\n // setHeaderSearchHover(true)\n // }\n\n const handleMouseOver = () => {\n fetchCustomers()\n setOpenMouseOver(false)\n }\n\n const handleClose = () => {\n setHeaderSearchHover(false)\n setOpenMouseOver(true)\n }\n\n const changeTildes = vocal => {\n switch (vocal) {\n case 'Í':\n return 'I'\n\n default:\n break\n }\n }\n\n const match = (currentInput, item) => {\n let query = removeAccents(currentInput.toUpperCase())\n if (customers.length === item.key) return true\n return item.label.toUpperCase().includes(query)\n }\n\n return (\n <>\n
\n
\n \n \n\n setHeaderSearchHover(true)}\n onMouseOver={openMouseOver ? handleMouseOver : () => {}}\n >\n \n