@orbe-agro/client-core 5.6.262 → 5.6.263

package/lib/@ecme/components/template/Search.tsx

@@ -1,17 +1,32 @@
 import { NavigationTree } from '@/@types/navigation'
 import Button from '@/components/ui/Button'
 import Dialog from '@/components/ui/Dialog'
+import Notification from '@/components/ui/Notification'
 import ScrollBar from '@/components/ui/ScrollBar'
+import toast from '@/components/ui/toast'
 import navigationConfig from '@/configs/navigation.config'
 import { NAV_ITEM_TYPE_ITEM } from '@/constants/navigation.constant'
 import { useSessionUser } from '@/store/authStore'
 import classNames from '@/utils/classNames'
 import withHeaderItem from '@/utils/hoc/withHeaderItem'
+import { TFavoritoMenuResponse } from '@base/@types/api/response/dadosMestres/TFavoritoMenuResponse'
+import {
+    apiCreateFavoritoMenu,
+    apiDeleteFavoritoMenu,
+    apiFindFavoritosByUsuario,
+} from '@base/services/modules/DadosMestres/FavoritoMenu/FavoritoMenuService'
 import debounce from 'lodash/debounce'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import Highlighter from 'react-highlight-words'
+import { mutate } from 'swr'
 import { useTranslation } from 'react-i18next'
-import { HiChevronRight, HiOutlineSearch } from 'react-icons/hi'
+import {
+    HiChevronRight,
+    HiOutlineSearch,
+    HiOutlineStar,
+    HiOutlineTrash,
+    HiStar,
+} from 'react-icons/hi'
 import { PiMagnifyingGlassDuotone } from 'react-icons/pi'
 import { Link } from 'react-router-dom'
 import { Spinner } from '../ui'
@@ -31,7 +46,7 @@ type SearchResult = {
     data: SearchData[]
 }
 
-const filterNavigationByAuthority = (
+export const filterNavigationByAuthority = (
     navTree: NavigationTree[],
     userAuthority: string[],
 ): NavigationTree[] => {
@@ -55,7 +70,10 @@ const filterNavigationByAuthority = (
             if (filteredSubMenu.length > 0) {
                 acc.push({ ...nav, subMenu: filteredSubMenu })
             }
-        } else if ((nav.path && userAuthority.includes(nav.path)) || !nav.path) {
+        } else if (
+            (nav.path && userAuthority.includes(nav.path)) ||
+            !nav.path
+        ) {
             acc.push(nav)
         }
 
@@ -71,49 +89,110 @@ const ListItem = (props: {
     keyWord: string
     breadcrumbs: string[]
     onNavigate: () => void
+    menuKey: string
+    isFavorited: boolean
+    favToggling: boolean
+    onToggleFavorite: (menuKey: string) => void
 }) => {
-    const { icon, label, url = '', keyWord, onNavigate, breadcrumbs } = props
+    const {
+        icon,
+        label,
+        url = '',
+        keyWord,
+        onNavigate,
+        breadcrumbs,
+        menuKey,
+        isFavorited,
+        favToggling,
+        onToggleFavorite,
+    } = props
 
     const makeBreadcrumbs = (breadcrumbs: string[]) => {
         return breadcrumbs.join(' / ')
     }
 
     return (
-        <Link to={url} onClick={onNavigate}>
-            <div
-                className={classNames(
-                    'flex items-center justify-between rounded-xl p-3 cursor-pointer user-select',
-                    'hover:bg-gray-100 dark:hover:bg-gray-700',
-                )}
-            >
-                <div className="flex items-center gap-2">
-                    {/* <div
-                        className={classNames(
-                            'rounded-lg border-2 border-gray-200 shadow-sm text-xl group-hover:shadow h-10 w-10 flex items-center justify-center bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100',
-                        )}
-                    >
-                        {icon && navigationIcon[icon]}
-                    </div> */}
-                    <div className="text-gray-900 dark:text-gray-300">
-                        <Highlighter
-                            autoEscape
-                            highlightClassName={classNames(
-                                'text-primary',
-                                'underline bg-transparent font-semibold dark:text-white',
-                            )}
-                            searchWords={[keyWord]}
-                            textToHighlight={makeBreadcrumbs(breadcrumbs)}
-                        />
+        <div className="flex items-center gap-1 pr-4">
+            <Link to={url} onClick={onNavigate} className="flex-1">
+                <div
+                    className={classNames(
+                        'flex items-center justify-between rounded-xl p-3 cursor-pointer user-select',
+                        'hover:bg-gray-100 dark:hover:bg-gray-700',
+                    )}
+                >
+                    <div className="w-72">
+                        <div className="overflow-hidden text-gray-900 dark:text-gray-300">
+                            <Highlighter
+                                autoEscape
+                                highlightClassName={classNames(
+                                    'text-primary',
+                                    'underline bg-transparent font-semibold dark:text-white',
+                                )}
+                                searchWords={[keyWord]}
+                                textToHighlight={makeBreadcrumbs(breadcrumbs)}
+                            />
+                        </div>
                     </div>
+                    <HiChevronRight className="shrink-0 text-lg" />
                 </div>
-                <HiChevronRight className="text-lg" />
-            </div>
-        </Link>
+            </Link>
+
+            <button
+                type="button"
+                className="flex-shrink-0 rounded-lg p-2 text-lg transition-colors hover:bg-gray-100 dark:hover:bg-gray-700"
+                disabled={favToggling}
+                onClick={(e) => {
+                    e.preventDefault()
+                    e.stopPropagation()
+                    onToggleFavorite(menuKey)
+                }}
+            >
+                {favToggling ? (
+                    <Spinner size={18} />
+                ) : isFavorited ? (
+                    <HiStar className="text-yellow-500" />
+                ) : (
+                    <HiOutlineStar className="text-gray-400 hover:text-yellow-500" />
+                )}
+            </button>
+        </div>
     )
 }
 
 type NavigationTreeFlat = NavigationTree & { parents: string[] }
 
+type NavItemInfo = {
+    key: string
+    path: string
+    title: string
+}
+
+const flattenNavTree = (
+    navTree: NavigationTree[],
+): Map<string, NavItemInfo> => {
+    const map = new Map<string, NavItemInfo>()
+
+    const walk = (items: NavigationTree[]) => {
+        for (const item of items) {
+            if (item.type === NAV_ITEM_TYPE_ITEM && item.path) {
+                map.set(item.key, {
+                    key: item.key,
+                    path: item.path,
+                    title: item.title,
+                })
+            }
+            if (item.subMenu && item.subMenu.length > 0) {
+                walk(item.subMenu)
+            }
+        }
+    }
+
+    walk(navTree)
+    return map
+}
+
+const navItemMap = flattenNavTree(navigationConfig)
+
 const _Search = ({ className }: { className?: string }) => {
     const [loading, setLoading] = useState(false)
     const [searchDialogOpen, setSearchDialogOpen] = useState(false)
@@ -121,6 +200,126 @@ const _Search = ({ className }: { className?: string }) => {
     const [noResult, setNoResult] = useState(false)
     const userAuthority = useSessionUser((state) => state.user.authority)
 
+    // -- Favorites state --
+    const [favDialogOpen, setFavDialogOpen] = useState(false)
+    const [favLoading, setFavLoading] = useState(false)
+    const [favorites, setFavorites] = useState<TFavoritoMenuResponse[]>([])
+    const [removingId, setRemovingId] = useState<number | null>(null)
+    const [favoritedKeys, setFavoritedKeys] = useState<Set<string>>(new Set())
+    const [togglingKeys, setTogglingKeys] = useState<Set<string>>(new Set())
+    const userId = useSessionUser((state) => state.user.userId)
+
+    const loadFavorites = async () => {
+        if (!userId) return
+        setFavLoading(true)
+        try {
+            const data = await apiFindFavoritosByUsuario(Number(userId))
+            setFavorites(data)
+            setFavoritedKeys(new Set(data.map((f) => f.menuKey)))
+        } catch {
+            toast.push(
+                <Notification title="Erro" type="danger">
+                    Falha ao carregar favoritos.
+                </Notification>,
+            )
+            setFavorites([])
+            setFavoritedKeys(new Set())
+        } finally {
+            setFavLoading(false)
+        }
+    }
+
+    const handleFavRemove = async (id: number) => {
+        setRemovingId(id)
+        try {
+            await apiDeleteFavoritoMenu(id)
+            setFavorites((prev) => prev.filter((f) => f.id !== id))
+            setFavoritedKeys((prev) => {
+                const next = new Set(prev)
+                const removed = favorites.find((f) => f.id === id)
+                if (removed) next.delete(removed.menuKey)
+                return next
+            })
+        } catch {
+            toast.push(
+                <Notification title="Erro" type="danger">
+                    Falha ao remover favorito.
+                </Notification>,
+            )
+        } finally {
+            setRemovingId(null)
+        }
+    }
+
+    const handleFavToggle = async (menuKey: string) => {
+        if (!userId || togglingKeys.has(menuKey)) return
+        setTogglingKeys((prev) => new Set(prev).add(menuKey))
+        try {
+            if (favoritedKeys.has(menuKey)) {
+                const fav = favorites.find((f) => f.menuKey === menuKey)
+                if (fav) {
+                    await apiDeleteFavoritoMenu(fav.id)
+                    setFavorites((prev) => prev.filter((f) => f.id !== fav.id))
+                    setFavoritedKeys((prev) => {
+                        const next = new Set(prev)
+                        next.delete(menuKey)
+                        return next
+                    })
+                }
+            } else {
+                const created = await apiCreateFavoritoMenu({ menuKey })
+                setFavorites((prev) => [...prev, created])
+                setFavoritedKeys((prev) => new Set(prev).add(menuKey))
+                // revalida o cache usado pelo FavoritesLanding com o novo item salvo
+                mutate(['/api/favoritos-menu/usuario', userId])
+            }
+        } catch {
+            toast.push(
+                <Notification title="Erro" type="danger">
+                    {favoritedKeys.has(menuKey)
+                        ? 'Falha ao remover favorito.'
+                        : 'Falha ao adicionar favorito.'}
+                </Notification>,
+            )
+        } finally {
+            setTogglingKeys((prev) => {
+                const next = new Set(prev)
+                next.delete(menuKey)
+                return next
+            })
+        }
+    }
+
+    const handleFavOpen = () => {
+        setFavDialogOpen(true)
+    }
+
+    const handleFavClose = () => {
+        setFavDialogOpen(false)
+    }
+
+    useEffect(() => {
+        if (favDialogOpen) {
+            loadFavorites()
+        }
+    }, [favDialogOpen, userId])
+
+    // Also load favorites when search opens (for star toggles in results)
+    useEffect(() => {
+        if (searchDialogOpen && userId) {
+            loadFavorites()
+        }
+    }, [searchDialogOpen, userId])
+
+    const enrichedFavorites = useMemo(() => {
+        return favorites.map((fav) => ({
+            ...fav,
+            navInfo: navItemMap.get(fav.menuKey),
+        }))
+    }, [favorites])
+
+    // -- end favorites state --
+
     const inputRef = useRef<HTMLInputElement>(null)
 
     const handleReset = () => {
@@ -243,12 +442,21 @@ const _Search = ({ className }: { className?: string }) => {
 
     return (
         <>
-            <div
-                className={classNames(className, 'text-2xl')}
-                onClick={handleSearchOpen}
-            >
-                <PiMagnifyingGlassDuotone />
+            <div className="flex items-center gap-1">
+                <div
+                    className={classNames(className, 'text-2xl')}
+                    onClick={handleSearchOpen}
+                >
+                    <PiMagnifyingGlassDuotone />
+                </div>
+                <div
+                    className={classNames(className, 'text-2xl')}
+                    onClick={handleFavOpen}
+                >
+                    <HiOutlineStar />
+                </div>
             </div>
+            {/* Search dialog */}
             <Dialog
                 contentClassName="p-0"
                 isOpen={searchDialogOpen}
@@ -262,7 +470,9 @@ const _Search = ({ className }: { className?: string }) => {
                             <input
                                 ref={inputRef}
                                 className="block w-full bg-transparent p-4 text-base text-gray-900 outline-none ring-0 dark:text-gray-100"
-                                placeholder={t('common.input.placeholder.search')}
+                                placeholder={t(
+                                    'common.input.placeholder.search',
+                                )}
                                 onChange={handleSearch}
                             />
                         </div>
@@ -272,58 +482,134 @@ const _Search = ({ className }: { className?: string }) => {
                     </div>
                     <div className="px-5 py-6">
                         {loading ? (
-                            <div
-                                className={classNames(
-                                    'flex items-center justify-center',
+                            <div className="flex items-center justify-center">
+                                <Spinner size={40} />
+                            </div>
+                        ) : (
+                            <ScrollBar className="max-h-[350px] overflow-y-auto">
+                                {searchResult.map((result) => (
+                                    <div key={result.title} className="mb-4">
+                                        <h6 className="mb-3">{result.title}</h6>
+                                        {result.data.map((data, index) => (
+                                            <ListItem
+                                                key={data.title + index}
+                                                icon={data.icon}
+                                                breadcrumbs={data.breadcrumbs}
+                                                label={data.title}
+                                                url={data.path}
+                                                keyWord={
+                                                    inputRef.current?.value ||
+                                                    ''
+                                                }
+                                                onNavigate={handleNavigate}
+                                                menuKey={data.key}
+                                                isFavorited={favoritedKeys.has(
+                                                    data.key,
+                                                )}
+                                                favToggling={togglingKeys.has(
+                                                    data.key,
+                                                )}
+                                                onToggleFavorite={
+                                                    handleFavToggle
+                                                }
+                                            />
+                                        ))}
+                                    </div>
+                                ))}
+                                {searchResult.length === 0 && noResult && (
+                                    <div className="my-10 text-center text-lg">
+                                        <span className="pr-1">
+                                            {t('common.status.noResultsFor')}
+                                        </span>
+                                        <span className="heading-text">
+                                            {`'`}
+                                            {inputRef.current?.value}
+                                            {`'`}
+                                        </span>
+                                    </div>
                                 )}
-                            >
+                            </ScrollBar>
+                        )}
+                    </div>
+                </div>
+            </Dialog>
+            {/* Favorites dialog */}
+            <Dialog
+                contentClassName="p-0"
+                isOpen={favDialogOpen}
+                closable={false}
+                onRequestClose={handleFavClose}
+            >
+                <div>
+                    <div className="flex items-center justify-between border-b border-gray-200 px-4 py-4 dark:border-gray-600">
+                        <div className="flex items-center gap-2">
+                            <HiStar className="text-xl text-yellow-500" />
+                            <h6 className="text-base font-semibold text-gray-900 dark:text-gray-100">
+                                Favoritos
+                            </h6>
+                        </div>
+                        <Button size="xs" onClick={handleFavClose}>
+                            Esc
+                        </Button>
+                    </div>
+                    <div className="px-5 py-6">
+                        {favLoading ? (
+                            <div className="flex items-center justify-center py-10">
                                 <Spinner size={40} />
                             </div>
                         ) : (
-                            <>
-                                <ScrollBar className="max-h-[350px] overflow-y-auto">
-                                    {searchResult.map((result) => (
-                                        <div
-                                            key={result.title}
-                                            className="mb-4"
-                                        >
-                                            <h6 className="mb-3">
-                                                {result.title}
-                                            </h6>
-                                            {result.data.map((data, index) => (
-                                                <ListItem
-                                                    key={data.title + index}
-                                                    icon={data.icon}
-                                                    breadcrumbs={
-                                                        data.breadcrumbs
+                            <ScrollBar className="max-h-[350px] overflow-y-auto">
+                                {enrichedFavorites.length === 0 ? (
+                                    <div className="my-10 text-center text-lg text-gray-500">
+                                        Nenhum favorito salvo.
+                                    </div>
+                                ) : (
+                                    <div className="flex flex-col gap-1">
+                                        {enrichedFavorites.map((fav) => (
+                                            <div
+                                                key={fav.id}
+                                                className="flex items-center gap-1 pr-4"
+                                            >
+                                                <Link
+                                                    to={
+                                                        fav.navInfo?.path || '#'
                                                     }
-                                                    label={data.title}
-                                                    url={data.path}
-                                                    keyWord={
-                                                        inputRef.current
-                                                            ?.value || ''
+                                                    className="flex-1"
+                                                    onClick={handleFavClose}
+                                                >
+                                                    <div className="user-select flex cursor-pointer items-center justify-between rounded-xl p-3 hover:bg-gray-100 dark:hover:bg-gray-700">
+                                                        <div className="w-72">
+                                                            <div className="overflow-hidden text-gray-900 dark:text-gray-300">
+                                                                {fav.navInfo
+                                                                    ?.title ||
+                                                                    fav.menuKey}
+                                                            </div>
+                                                        </div>
+                                                        <HiChevronRight className="h-6 w-6 shrink-0" />
+                                                    </div>
+                                                </Link>
+                                                <button
+                                                    type="button"
+                                                    className="flex-shrink-0 rounded-lg p-2 text-lg text-gray-400 transition-colors hover:bg-gray-100 hover:text-red-500 dark:hover:bg-gray-700"
+                                                    disabled={
+                                                        removingId === fav.id
                                                     }
-                                                    onNavigate={handleNavigate}
-                                                />
-                                            ))}
-                                        </div>
-                                    ))}
-                                    {searchResult.length === 0 && noResult && (
-                                        <div className="my-10 text-center text-lg">
-                                            <span className="pr-1">
-                                                {t(
-                                                    'common.status.noResultsFor',
-                                                )}
-                                            </span>
-                                            <span className="heading-text">
-                                                {`'`}
-                                                {inputRef.current?.value}
-                                                {`'`}
-                                            </span>
-                                        </div>
-                                    )}
-                                </ScrollBar>
-                            </>
+                                                    onClick={(e) => {
+                                                        e.stopPropagation()
+                                                        handleFavRemove(fav.id)
+                                                    }}
+                                                >
+                                                    {removingId === fav.id ? (
+                                                        <Spinner size={18} />
+                                                    ) : (
+                                                        <HiOutlineTrash />
+                                                    )}
+                                                </button>
+                                            </div>
+                                        ))}
+                                    </div>
+                                )}
+                            </ScrollBar>
                         )}
                     </div>
                 </div>

package/lib/@ecme/components/ui/Dropdown/DropdownMenu.tsx

@@ -47,6 +47,8 @@ export interface DropdownMenuProps
     activeKey?: string
     title?: string | ReactNode
     menuClass?: string
+    /** Classes do wrapper flutuante (portal). Útil para subir o z-index acima de painéis fixos. */
+    floatingClass?: string
     trigger?: 'click' | 'hover' | 'context'
     placement?: Placement
     onOpen?: (bool: boolean) => void
@@ -66,6 +68,7 @@ const DropdownMenu = (props: DropdownMenuProps & HTMLProps<HTMLElement>) => {
         disabled,
         toggleClassName,
         menuClass,
+        floatingClass,
         placement,
         trigger = 'click',
         onOpen,
@@ -302,7 +305,10 @@ const DropdownMenu = (props: DropdownMenuProps & HTMLProps<HTMLElement>) => {
                                     ref={refs.setFloating}
                                     style={floatingStyles}
                                     {...getFloatingProps()}
-                                    className="outline-none z-30"
+                                    className={classNames(
+                                        'outline-none z-30',
+                                        floatingClass,
+                                    )}
                                 >
                                     <ul
                                         className={classNames(

package/lib/@ecme/components/view/ChatBox/ChatBox.tsx

@@ -32,6 +32,10 @@ const ChatBox = forwardRef<ScrollBarRef, ChatBoxProps>((props, ref) => {
         customRenderer,
         customAction,
         bubbleClass,
+        myBubbleClass,
+        botBubbleClass,
+        errorBubbleClass,
+        renderTyping,
         typing,
         messageListClass,
         containerClass,
@@ -59,6 +63,10 @@ const ChatBox = forwardRef<ScrollBarRef, ChatBoxProps>((props, ref) => {
                     typing={typing}
                     messageListClass={messageListClass}
                     bubbleClass={bubbleClass}
+                    myBubbleClass={myBubbleClass}
+                    botBubbleClass={botBubbleClass}
+                    errorBubbleClass={errorBubbleClass}
+                    renderTyping={renderTyping}
                 />            )}
             {children}
         </ChatContainer>

package/lib/@ecme/components/view/ChatBox/components/MessageList.tsx

@@ -6,7 +6,7 @@ import { forwardRef } from 'react'
 import type { ScrollBarRef } from '@/components/ui/ScrollBar'
 import type { MessageProps } from './Message'
 
-type List = MessageProps & { fresh?: boolean }
+type List = MessageProps & { fresh?: boolean; isError?: boolean }
 
 export type MessageListProps = {
     list: List[]
@@ -22,6 +22,10 @@ export type MessageListProps = {
     customRenderer?: (message: List, index: number) => string | ReactNode
     customAction?: (message: List, index: number) => string | ReactNode
     bubbleClass?: string
+    myBubbleClass?: string
+    botBubbleClass?: string
+    errorBubbleClass?: string
+    renderTyping?: () => ReactNode
     messageListClass?: string
 }
 
@@ -34,6 +38,10 @@ const MessageList = forwardRef<ScrollBarRef, MessageListProps>((props, ref) => {
         customAction,
         messageListClass,
         bubbleClass,
+        myBubbleClass,
+        botBubbleClass,
+        errorBubbleClass,
+        renderTyping,
     } = props
 
     return (
@@ -49,7 +57,13 @@ const MessageList = forwardRef<ScrollBarRef, MessageListProps>((props, ref) => {
                                 key={message.id}
                                 showAvatar={showAvatar}
                                 avatarGap={avatarGap}
-                                bubbleClass={bubbleClass}
+                                bubbleClass={
+                                    message.isError
+                                        ? errorBubbleClass ?? bubbleClass
+                                        : message.isMyMessage
+                                          ? myBubbleClass ?? bubbleClass
+                                          : botBubbleClass ?? bubbleClass
+                                }
                                 {...message}
                                 {...(customRenderer
                                     ? {
@@ -71,14 +85,18 @@ const MessageList = forwardRef<ScrollBarRef, MessageListProps>((props, ref) => {
                                 sender={typing}
                                 type="regular"
                                 showAvatar={showAvatar}
-                                bubbleClass={bubbleClass}
+                                bubbleClass={botBubbleClass ?? bubbleClass}
                                 avatarGap={avatarGap}
                                 content={
-                                    <span className="flex items-center gap-2">
-                                        <span className="size-1.5 rounded-full bg-gray-700 motion-safe:animate-[bounce_1s_ease-in-out_infinite] dark:bg-gray-300"></span>
-                                        <span className="size-1.5 rounded-full bg-gray-700 motion-safe:animate-[bounce_0.5s_ease-in-out_infinite] dark:bg-gray-300"></span>
-                                        <span className="size-1.5 rounded-full bg-gray-700 motion-safe:animate-[bounce_1s_ease-in-out_infinite] dark:bg-gray-300"></span>
-                                    </span>
+                                    renderTyping ? (
+                                        renderTyping()
+                                    ) : (
+                                        <span className="flex items-center gap-2">
+                                            <span className="size-1.5 rounded-full bg-gray-700 motion-safe:animate-[bounce_1s_ease-in-out_infinite] dark:bg-gray-300"></span>
+                                            <span className="size-1.5 rounded-full bg-gray-700 motion-safe:animate-[bounce_0.5s_ease-in-out_infinite] dark:bg-gray-300"></span>
+                                            <span className="size-1.5 rounded-full bg-gray-700 motion-safe:animate-[bounce_1s_ease-in-out_infinite] dark:bg-gray-300"></span>
+                                        </span>
+                                    )
                                 }
                             />
                         )}