@orbe-agro/client-core-prod 5.6.136 → 5.6.155

package/lib/@ecme/components/template/VerticalMenuContent/VerticalMenuContent.stories.tsx

@@ -2,12 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { BrowserRouter } from 'react-router-dom'
 import VerticalMenuContent from './VerticalMenuContent'
 import type { NavigationTree } from '@/@types/navigation'
-import ticketNavigationConfig from '@base/configs/navigation.config/modules.submenu/Ticket/ticket.navigation'
-import {
-    NAV_ITEM_TYPE_COLLAPSE,
-    NAV_ITEM_TYPE_ITEM,
-    NAV_ITEM_TYPE_TITLE,
-} from '@/constants/navigation.constant'
+import modulesNavigationConfig from '@base/configs/navigation.config/modules.navigation'
 
 const collectAuthorityPaths = (navTree: NavigationTree[]): string[] => {
     return navTree.reduce((acc: string[], node) => {
@@ -23,151 +18,10 @@ const collectAuthorityPaths = (navTree: NavigationTree[]): string[] => {
     }, [])
 }
 
-const ticketAuthority = Array.from(
-    new Set(collectAuthorityPaths(ticketNavigationConfig)),
+const allAuthority = Array.from(
+    new Set(collectAuthorityPaths(modulesNavigationConfig)),
 )
 
-const ticketSubmenuAllExpanded: NavigationTree[] = ticketNavigationConfig.map(
-    (menu) => {
-        if (menu.key !== 'ticket') {
-            return menu
-        }
-
-        return {
-            ...menu,
-            subMenu: menu.subMenu.map((subMenu) => {
-                if (
-                    subMenu.key === 'ticket.relatorios' ||
-                    subMenu.key === 'ticket.cadastros'
-                ) {
-                    return {
-                        ...subMenu,
-                        type: NAV_ITEM_TYPE_TITLE,
-                    }
-                }
-
-                return subMenu
-            }),
-        }
-    },
-)
-
-const mockNavigationTree: NavigationTree[] = [
-    {
-        key: 'inicio',
-        path: '/inicio',
-        title: 'Início',
-        translateKey: 'nav.inicio',
-        icon: '',
-        type: NAV_ITEM_TYPE_ITEM,
-        authority: ['/inicio'],
-        subMenu: [],
-    },
-    {
-        key: 'cadastros',
-        path: '',
-        title: 'Cadastros',
-        translateKey: 'nav.cadastros',
-        icon: '',
-        type: NAV_ITEM_TYPE_COLLAPSE,
-        authority: ['/cadastros'],
-        subMenu: [
-            {
-                key: 'clientes',
-                path: '/cadastros/clientes',
-                title: 'Clientes',
-                translateKey: 'nav.clientes',
-                icon: '',
-                type: NAV_ITEM_TYPE_ITEM,
-                authority: ['/cadastros/clientes'],
-                subMenu: [],
-            },
-            {
-                key: 'fornecedores',
-                path: '/cadastros/fornecedores',
-                title: 'Fornecedores',
-                translateKey: 'nav.fornecedores',
-                icon: '',
-                type: NAV_ITEM_TYPE_ITEM,
-                authority: ['/cadastros/fornecedores'],
-                subMenu: [],
-            },
-        ],
-    },
-    {
-        key: 'relatorios',
-        path: '/relatorios',
-        title: 'Relatórios',
-        translateKey: 'nav.relatorios',
-        icon: 'ChartBarIcon',
-        type: NAV_ITEM_TYPE_ITEM,
-        authority: ['/relatorios'],
-        subMenu: [],
-    },
-    {
-        key: 'configuracoes',
-        path: '',
-        title: 'Configurações',
-        translateKey: 'nav.configuracoes',
-        icon: '',
-        type: NAV_ITEM_TYPE_COLLAPSE,
-        authority: ['/configuracoes'],
-        subMenu: [
-            {
-                key: 'perfil',
-                path: '/configuracoes/perfil',
-                title: 'Perfil',
-                translateKey: 'nav.perfil',
-                icon: '',
-                type: NAV_ITEM_TYPE_ITEM,
-                authority: ['/configuracoes/perfil'],
-                subMenu: [],
-            },
-            {
-                key: 'integracoes',
-                path: '',
-                title: 'Integrações',
-                translateKey: 'nav.integracoes',
-                icon: '',
-                type: NAV_ITEM_TYPE_COLLAPSE,
-                authority: ['/configuracoes/integracoes'],
-                subMenu: [
-                    {
-                        key: 'webhooks',
-                        path: '/configuracoes/integracoes/webhooks',
-                        title: 'Webhooks',
-                        translateKey: 'nav.webhooks',
-                        icon: 'WebhookIcon',
-                        type: NAV_ITEM_TYPE_ITEM,
-                        authority: ['/configuracoes/integracoes/webhooks'],
-                        subMenu: [],
-                    },
-                    {
-                        key: 'lorem.ipsum',
-                        path: '/configuracoes/integracoes/lorem-ipsum',
-                        title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-                        translateKey: 'nav.loremIpsum',
-                        icon: 'LoremIpsumIcon',
-                        type: NAV_ITEM_TYPE_ITEM,
-                        authority: ['/configuracoes/integracoes/lorem-ipsum'],
-                        subMenu: [],
-                    },
-                ],
-            },
-        ],
-    },
-]
-
-const allUserAuthority = [
-    '/inicio',
-    '/cadastros/clientes',
-    '/cadastros/fornecedores',
-    '/relatorios',
-    '/configuracoes/perfil',
-    '/configuracoes/integracoes/webhooks',
-    '/configuracoes/integracoes/lorem-ipsum',
-]
-
 const meta: Meta<typeof VerticalMenuContent> = {
     title: '@ecme/Template/VerticalMenuContent',
     component: VerticalMenuContent,
@@ -202,110 +56,17 @@ type TStory = StoryObj<typeof VerticalMenuContent>
 export const Default: TStory = {
     args: {
         collapsed: false,
-        routeKey: '/inicio',
-        navigationTree: mockNavigationTree,
-        userAuthority: allUserAuthority,
-        direction: 'ltr',
-        translationSetup: true,
-    },
-}
-
-export const Collapsed: TStory = {
-    args: {
-        collapsed: true,
-        routeKey: '/cadastros/clientes',
-        navigationTree: mockNavigationTree,
-        userAuthority: allUserAuthority,
-        direction: 'ltr',
-        translationSetup: true,
-    },
-}
-
-export const WithExpandedMenu: TStory = {
-    args: {
-        collapsed: false,
-        routeKey: '/configuracoes/integracoes/webhooks',
-        navigationTree: mockNavigationTree,
-        userAuthority: allUserAuthority,
-        direction: 'ltr',
-        translationSetup: true,
-    },
-}
-
-export const LimitedAuthority: TStory = {
-    args: {
-        collapsed: false,
-        routeKey: '/inicio',
-        navigationTree: mockNavigationTree,
-        userAuthority: ['/inicio', '/relatorios'],
-        direction: 'ltr',
-        translationSetup: true,
-    },
-}
-
-export const RTLDirection: TStory = {
-    args: {
-        collapsed: false,
-        routeKey: '/inicio',
-        navigationTree: mockNavigationTree,
-        userAuthority: allUserAuthority,
-        direction: 'rtl',
-        translationSetup: true,
-    },
-}
-
-export const MinimalNavigation: TStory = {
-    args: {
-        collapsed: false,
-        routeKey: '/inicio',
-        navigationTree: [
-            {
-                key: 'inicio',
-                path: '/inicio',
-                title: 'Início',
-                translateKey: 'nav.inicio',
-                icon: '',
-                type: NAV_ITEM_TYPE_ITEM,
-                authority: ['/inicio'],
-                subMenu: [],
-            },
-        ],
-        userAuthority: ['/inicio'],
-        direction: 'ltr',
-        translationSetup: true,
-    },
-}
-
-export const WithMenuClick: TStory = {
-    args: {
-        collapsed: false,
-        routeKey: '/inicio',
-        navigationTree: mockNavigationTree,
-        userAuthority: allUserAuthority,
-        direction: 'ltr',
-        translationSetup: true,
-        onMenuItemClick: () => alert('Menu item clicked!'),
-    },
-}
-
-export const TicketSubmenu: TStory = {
-    args: {
-        collapsed: false,
-        routeKey: 'ticket',
-        navigationTree: ticketNavigationConfig,
-        userAuthority: ticketAuthority,
-        direction: 'ltr',
-        translationSetup: true,
-    },
-}
-
-export const TicketSubmenuSortOrderStable: TStory = {
-    args: {
-        collapsed: false,
-        routeKey: 'ticket',
-        navigationTree: ticketSubmenuAllExpanded,
-        userAuthority: ticketAuthority,
+        routeKey: 'modules',
+        navigationTree: modulesNavigationConfig,
+        userAuthority: allAuthority,
         direction: 'ltr',
         translationSetup: true,
     },
+    decorators: [
+        (Story) => (
+            <div style={{ maxWidth: '25vw' }}>
+                <Story />
+            </div>
+        ),
+    ],
 }

package/lib/@ecme/components/template/VerticalMenuContent/VerticalSingleMenuItem.tsx

@@ -57,37 +57,15 @@ const DefaultItem = (props: DefaultItemProps) => {
         linkRenderer,
     } = props
 
-    const translatedTitle = t(nav.translateKey, nav.title)
-
-    const renderItemContent = (titleClassName?: string) => (
+    const linkContent = (
         <>
             {showIcon && <VerticalMenuIcon icon={nav.icon} />}
             {showTitle && (
-                <span className={titleClassName}>{translatedTitle}</span>
+                <span className="whitespace-normal">{t(nav.translateKey, nav.title)}</span>
             )}
         </>
     )
 
-    const linkContent = (
-        <span className="relative flex min-w-0 flex-1 items-center gap-2">
-            <span className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
-                {renderItemContent('truncate')}
-            </span>
-            {showTitle && (
-                <div className="w-100 absolute -left-3 top-1/2 z-20 hidden min-w-[calc(100%+1.5rem)] -translate-y-1/2 group-hover/item:block group-focus-visible/item:block">
-                    <ScrollBar
-                        autoHide
-                        className="max-h-16 rounded-lg bg-gray-100 text-gray-900 dark:bg-gray-700 dark:text-gray-100"
-                    >
-                        <div className="flex h-full w-max min-w-full items-center gap-2 whitespace-nowrap rounded-lg px-3 font-semibold">
-                            {renderItemContent()}
-                        </div>
-                    </ScrollBar>
-                </div>
-            )}
-        </span>
-    )
-
     const renderLink = () => {
         if (linkRenderer) {
             return linkRenderer(nav, linkContent)
@@ -96,7 +74,7 @@ const DefaultItem = (props: DefaultItemProps) => {
         return (
             <Link
                 to={nav.path}
-                className="group/item relative flex w-full min-w-0 items-center gap-2"
+                className="flex h-full w-full items-center gap-2"
                 target={nav.isExternalLink ? '_blank' : ''}
                 onClick={() =>
                     onLinkClick?.({

package/lib/@ecme/components/ui/UploadCustom/UploadCustom.tsx

@@ -0,0 +1,169 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useRef, useState, useCallback } from 'react'
+import classNames from '../utils/classNames'
+import Button from '../Button/Button'
+import Notification from '../Notification/Notification'
+import toast from '../toast/toast'
+import type { CommonProps } from '../@types/common'
+import type { ReactNode, ChangeEvent, MouseEvent, Ref } from 'react'
+
+export interface UploadCustomProps extends CommonProps {
+    accept?: string
+    beforeUpload?: (file: FileList | null) => boolean | string
+    disabled?: boolean
+    draggable?: boolean
+    multiple?: boolean
+    onChange?: (files: File[]) => void
+    ref?: Ref<HTMLDivElement>
+    tip?: string | ReactNode
+}
+
+const UploadCustom = (props: UploadCustomProps) => {
+    const {
+        accept,
+        beforeUpload,
+        disabled = false,
+        draggable = false,
+        multiple,
+        onChange,
+        ref,
+        tip,
+        children,
+        className,
+        ...rest
+    } = props
+
+    const fileInputField = useRef<HTMLInputElement>(null)
+    const [dragOver, setDragOver] = useState(false)
+
+    const triggerMessage = (msg: string | ReactNode = '') => {
+        toast.push(
+            <Notification type="danger" duration={2000}>
+                {msg || 'Upload Failed!'}
+            </Notification>,
+            {
+                placement: 'top-center',
+            },
+        )
+    }
+
+    const onNewFileUpload = (e: ChangeEvent<HTMLInputElement>) => {
+        const { files: newFiles } = e.target
+        let result: boolean | string = true
+
+        if (beforeUpload) {
+            result = beforeUpload(newFiles)
+
+            if (result === false) {
+                triggerMessage()
+                return
+            }
+
+            if (typeof result === 'string' && result.length > 0) {
+                triggerMessage(result)
+                return
+            }
+        }
+
+        if (result && newFiles) {
+            // Converte FileList para Array e passa apenas os novos arquivos
+            const filesArray = Array.from(newFiles)
+            onChange?.(filesArray)
+        }
+
+        // Limpa o input para permitir selecionar o mesmo arquivo novamente
+        if (fileInputField.current) {
+            fileInputField.current.value = ''
+        }
+    }
+
+    const triggerUpload = (e: MouseEvent<HTMLDivElement>) => {
+        if (!disabled) {
+            fileInputField.current?.click()
+        }
+        e.stopPropagation()
+    }
+
+    const renderChildren = () => {
+        if (!draggable && !children) {
+            return (
+                <Button disabled={disabled} onClick={(e) => e.preventDefault()}>
+                    Upload
+                </Button>
+            )
+        }
+
+        if (draggable && !children) {
+            return <span>Choose a file or drag and drop here</span>
+        }
+
+        return children
+    }
+
+    const handleDragLeave = useCallback(() => {
+        if (draggable) {
+            setDragOver(false)
+        }
+    }, [draggable])
+
+    const handleDragOver = useCallback(() => {
+        if (draggable && !disabled) {
+            setDragOver(true)
+        }
+    }, [draggable, disabled])
+
+    const handleDrop = useCallback(() => {
+        if (draggable) {
+            setDragOver(false)
+        }
+    }, [draggable])
+
+    const draggableProp = {
+        onDragLeave: handleDragLeave,
+        onDragOver: handleDragOver,
+        onDrop: handleDrop,
+    }
+
+    const draggableEventFeedbackClass = `border-primary`
+
+    const uploadClass = classNames(
+        'upload',
+        draggable && `upload-draggable`,
+        draggable && !disabled && `hover:${draggableEventFeedbackClass}`,
+        draggable && disabled && 'disabled',
+        dragOver && draggableEventFeedbackClass,
+        className,
+    )
+
+    const uploadInputClass = classNames(
+        'upload-input',
+        draggable && `draggable`,
+    )
+
+    return (
+        <>
+            <div
+                ref={ref}
+                className={uploadClass}
+                {...(draggable ? draggableProp : { onClick: triggerUpload })}
+                {...(rest as any)}
+            >
+                <input
+                    ref={fileInputField}
+                    className={uploadInputClass}
+                    type="file"
+                    disabled={disabled}
+                    multiple={multiple}
+                    accept={accept}
+                    title=""
+                    value=""
+                    onChange={onNewFileUpload}
+                ></input>
+                {renderChildren()}
+            </div>
+            {tip}
+        </>
+    )
+}
+
+export default UploadCustom

package/lib/@ecme/components/ui/UploadCustom/index.tsx

@@ -0,0 +1,6 @@
+import UploadCustom from './UploadCustom'
+
+export type { UploadCustomProps } from './UploadCustom'
+export { UploadCustom }
+
+export default UploadCustom

package/lib/@ecme/components/ui/index.ts

@@ -38,6 +38,7 @@ export { default as Timeline } from './Timeline'
 export { default as toast } from './toast'
 export { default as Tooltip } from './Tooltip'
 export { default as Upload } from './Upload'
+export { default as UploadCustom } from './UploadCustom'
 
 export type { AlertProps } from './Alert'
 export type { AvatarProps, AvatarGroupProps } from './Avatar'
@@ -109,3 +110,4 @@ export type { TimelineProps, TimeLineItemProps } from './Timeline'
 export type { ToastProps } from './toast'
 export type { TooltipProps } from './Tooltip'
 export type { UploadProps } from './Upload'
+export type { UploadCustomProps } from './UploadCustom'

package/lib/@ecme/locales/index.ts

@@ -1,4 +1,8 @@
 import i18n from './locales'
 
 export { dateLocales } from './locales'
+export {
+	ensureAppLocaleResourcesLoaded,
+	initAllAppLocaleResources,
+} from './initAll'
 export default i18n

package/lib/@ecme/locales/initAll.ts

@@ -0,0 +1,25 @@
+import i18n from './locales'
+import { addBaseLocaleResources } from '@base/locales'
+import { addPageLocaleResources } from '@/views/auth/lang'
+
+export function initAllAppLocaleResources() {
+    addBaseLocaleResources()
+    addPageLocaleResources()
+}
+
+export async function ensureAppLocaleResourcesLoaded() {
+    initAllAppLocaleResources()
+
+    if (i18n.isInitialized) {
+        return
+    }
+
+    await new Promise<void>((resolve) => {
+        const handleInitialized = () => {
+            i18n.off('initialized', handleInitialized)
+            resolve()
+        }
+
+        i18n.on('initialized', handleInitialized)
+    })
+}

package/lib/@ecme/locales/lang/en/common.ts

@@ -88,6 +88,49 @@ export default {
             of: 'of',
             all: 'All',
         },
+        layout: {
+            search: {
+                results: {
+                    navTree: 'Navigation',
+                },
+            },
+            profile: {
+                dropdown: {
+                    options: {
+                        profile: 'Profile',
+                        settings: 'Settings',
+                        activity: 'Activity',
+                        signOut: 'Sign Out',
+                    },
+                },
+            },
+            themeConfig: {
+                title: 'Theme Configuration',
+                options: {
+                    darkMode: 'Dark mode',
+                    darkModeDesc: 'Toggle between light and dark theme',
+                    direction: 'Direction',
+                    directionDesc: 'User interface direction',
+                    theme: 'Theme',
+                    layout: 'Layout',
+                    layoutCollapsible: 'Collapsible',
+                    layoutStacked: 'Stacked',
+                    layoutTopbar: 'Topbar',
+                    layoutFrameless: 'Frameless',
+                    layoutOverlay: 'Overlay',
+                    layoutBlank: 'Blank',
+                },
+                buttons: {
+                    copyConfig: 'Copy config',
+                },
+            },
+            notifications: {
+                title: 'Notifications',
+                actions: {
+                    readAll: 'Mark all as read',
+                },
+            },
+        },
         ...EnModulesCommon,
     },
 }

package/lib/@ecme/locales/lang/en/index.ts

@@ -1,9 +1,11 @@
 import common from './common'
 import nav from './nav'
 import pages from './pages'
+import base from '@base/locales/lang/en'
 
 export default {
     ...nav,
     ...common,
     ...pages,
+    ...base,
 }

package/lib/@ecme/locales/lang/ptBR/common.ts

@@ -42,7 +42,7 @@ export default {
             deselect: 'Desmarcar',
             download: 'Baixar',
             upload: 'Enviar',
-            finish: 'Finalizar'
+            finish: 'Finalizar',
         },
         validation: {
             required: 'Este campo é obrigatório',
@@ -89,6 +89,49 @@ export default {
             of: 'de',
             all: 'Todos',
         },
+        layout: {
+            search: {
+                results: {
+                    navTree: 'Navegação',
+                },
+            },
+            profile: {
+                dropdown: {
+                    options: {
+                        profile: 'Perfil',
+                        settings: 'Configurações',
+                        activity: 'Atividade',
+                        signOut: 'Sair',
+                    },
+                },
+            },
+            themeConfig: {
+                title: 'Configuração de Tema',
+                options: {
+                    darkMode: 'Modo escuro',
+                    darkModeDesc: 'Alternar entre tema claro e escuro',
+                    direction: 'Direção',
+                    directionDesc: 'Direção da interface do usuário',
+                    theme: 'Tema',
+                    layout: 'Layout',
+                    layoutCollapsible: 'Colapsável',
+                    layoutStacked: 'Empilhado',
+                    layoutTopbar: 'Barra superior',
+                    layoutFrameless: 'Sem moldura',
+                    layoutOverlay: 'Sobreposto',
+                    layoutBlank: 'Em branco',
+                },
+                buttons: {
+                    copyConfig: 'Copiar configuração',
+                },
+            },
+            notifications: {
+                title: 'Notificações',
+                actions: {
+                    readAll: 'Marcar tudo como lido',
+                },
+            },
+        },
         ...ModulesCommon,
     },
 } as typeof EnCommon

package/lib/@ecme/locales/lang/ptBR/index.ts

@@ -1,9 +1,11 @@
 import common from './common'
 import nav from './nav'
 import pages from './pages'
+import base from '@base/locales/lang/ptBR'
 
 export default {
     ...nav,
     ...common,
     ...pages,
+    ...base,
 }