@evolution-soft/ui 1.0.0 → 1.0.3

package/components/sidebar/index.tsx

@@ -0,0 +1,645 @@
+import { useState, useEffect, useRef, useMemo } from 'react';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+import { useAuth } from '@/contexts/AuthContext';
+import { usePermissions } from '@/hooks/usePermissions';
+import { useThemeStore } from '@/stores/useThemeStore';
+
+import { cn } from '@/components/ui/utils';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+import { ThemeToggle } from '@/components/ui/theme-toggle';
+import { SettingsModal } from '@/components/settings-modal';
+import { TooltipIndicator } from '@/components/tooltip-indicator';
+import { ToggleFullScreenModeButton } from '@/components/fullscreen-mode';
+
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+
+import {
+    LogOut,
+    Menu,
+    X,
+    ChevronLeft,
+    ChevronRight,
+    ChevronDown
+} from 'lucide-react';
+
+
+import { LottieIcon } from '../lottie-icon';
+
+import homeIcon from '@/public/animations/icons-sidebar/home-icon.json';
+import agrupamentosIcon from '@/public/animations/icons-sidebar/sidebar-agrupamentos-icon.json';
+import timeIcon from '@/public/animations/icons-sidebar/sidebar-time-icon.json';
+import basepatanIcon from '@/public/animations/icons-sidebar/sidebar-basepatan-icon.json';
+import dashboardIcon from '@/public/animations/icons-sidebar/sidebar-dashboard-icon.json';
+import kanbanIcon from '@/public/animations/icons-sidebar/sidebar-kanban-icon.json';
+import rotaIcon from '@/public/animations/icons-sidebar/sidebar-rota-icon.json';
+import heijunkaIcon from '@/public/animations/icons-sidebar/sidebar-heijunka-icon.json';
+
+import homeIconDark from '@/public/animations/icons-sidebar-dark/home-icon-dark.json';
+import agrupamentosIconDark from '@/public/animations/icons-sidebar-dark/sidebar-agrupamentos-icon-dark.json';
+import timeIconDark from '@/public/animations/icons-sidebar-dark/sidebar-time-icon-dark.json';
+import basepatanIconDark from '@/public/animations/icons-sidebar-dark/sidebar-basepatan-icon-dark.json';
+import dashboardIconDark from '@/public/animations/icons-sidebar-dark/sidebar-dashboard-icon-dark.json';
+import kanbanIconDark from '@/public/animations/icons-sidebar-dark/sidebar-kanban-icon-dark.json';
+import rotaIconDark from '@/public/animations/icons-sidebar-dark/sidebar-rota-icon-dark.json';
+import heijunkaIconDark from '@/public/animations/icons-sidebar-dark/sidebar-heijunka-icon-dark.json';
+
+import logo from '@/public/logo.png';
+import Image from 'next/image';
+
+interface SubMenuItem {
+    label: string;
+    href: string;
+    functionality?: string;
+    development?: boolean;
+    analysis?: boolean;
+    alert?: string;
+}
+
+interface MenuItem {
+    label: string;
+    href: string;
+    lightAnimationData: any;
+    darkAnimationData: any;
+    color?: string;
+    badge?: string;
+    description?: string;
+    functionality?: string;
+    subItems?: SubMenuItem[];
+}
+
+interface MenuItemComponentProps {
+    item: MenuItem;
+    isActive: boolean;
+    collapsed: boolean;
+    hasSubItems?: boolean;
+    onToggle?: () => void;
+    isOpen?: boolean;
+}
+
+const colorMapping = {
+    blue: 'border-blue-500',
+    green: 'border-green-500',
+    yellow: 'border-yellow-500',
+    red: 'border-red-500',
+    purple: 'border-purple-500',
+    teal: 'border-teal-500',
+    orange: 'border-orange-500',
+    pink: 'border-pink-500',
+    indigo: 'border-indigo-500',
+    cyan: 'border-cyan-500',
+    rose: 'border-rose-500',
+} as const;
+
+const SubMenuItemComponent = ({ item, isActive, collapsed }: { item: SubMenuItem; isActive: boolean; collapsed: boolean }) => {
+    const [isHovered, setIsHovered] = useState(false);
+
+    return (
+        <Link href={item.href}>
+            <div
+                className={cn(
+                    "flex items-center gap-2 rounded-lg px-3 py-2 text-xs transition-colors ml-6",
+                    "hover:bg-accent hover:text-accent-foreground",
+                    isActive && "bg-accent text-accent-foreground font-medium",
+                    collapsed && "justify-center ml-0"
+                )}
+                title={collapsed ? item.label : undefined}
+                onMouseEnter={() => setIsHovered(true)}
+                onMouseLeave={() => setIsHovered(false)}
+            >
+                {!collapsed && (
+                    <>
+                        <span className="transition-opacity duration-300">{item.label}</span>
+                        {item.development && (
+                            <TooltipIndicator type="development" />
+                        )}
+                        {item.analysis && (
+                            <TooltipIndicator type="analysis" message={item.alert} />
+                        )}
+                    </>
+                )}
+            </div>
+        </Link>
+    );
+};
+
+const MenuItemComponent = ({ item, isActive, collapsed, hasSubItems, onToggle, isOpen }: MenuItemComponentProps) => {
+    const [isHovered, setIsHovered] = useState(false);
+    const [isDark, setIsDark] = useState(false);
+
+    useEffect(() => {
+        const checkDarkMode = () => {
+            setIsDark(document.documentElement.classList.contains('dark'));
+        };
+
+        checkDarkMode();
+
+        const observer = new MutationObserver(checkDarkMode);
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['class']
+        });
+
+        return () => observer.disconnect();
+    }, []);
+
+    const handleClick = (e: React.MouseEvent) => {
+        if (hasSubItems && onToggle) {
+            e.preventDefault();
+            onToggle();
+        }
+    };
+
+    // Extraímos o conteúdo visual para não repetir código
+    const Content = (
+        <div
+            className={cn(
+                "flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm transition-colors cursor-pointer", // Adicionado cursor-pointer
+                "hover:bg-accent hover:text-accent-foreground",
+                (isActive || isOpen) && `bg-accent text-accent-foreground font-medium border-l-6 ${item.color && colorMapping[item.color as keyof typeof colorMapping] || 'border-blue-500'}`,
+                collapsed && (isActive || isOpen) && `border-r-0 border-t-0 border-l-0 border-b-3 ${item.color && colorMapping[item.color as keyof typeof colorMapping] || 'border-blue-500'}`,
+                collapsed && `justify-center `
+            )}
+            title={collapsed ? item.label : undefined}
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+        >
+            <LottieIcon
+                lightAnimationData={item.lightAnimationData}
+                darkAnimationData={item.darkAnimationData}
+                className="h-5 w-5 shrink-0"
+                isActive={isActive || isOpen}
+                shouldPlay={isHovered}
+                isDark={isDark}
+            />
+            {!collapsed && (
+                <div className="flex flex-col flex-1 transition-all duration-300 ease-in-out">
+                    <span className="transition-opacity duration-300">{item.label}</span>
+                    {item.description && (
+                        <span className="text-xs text-muted-foreground transition-opacity duration-300">{item.description}</span>
+                    )}
+                </div>
+            )}
+            {!collapsed && item.badge && (
+                <Badge variant="secondary" className="ml-auto text-xs h-5 px-1.5">
+                    {item.badge}
+                </Badge>
+            )}
+            {!collapsed && hasSubItems && (
+                <ChevronDown
+                    className={cn(
+                        "h-3.5 w-3.5 shrink-0 transition-transform duration-200",
+                        isOpen && "transform rotate-180"
+                    )}
+                />
+            )}
+        </div>
+    );
+
+    // Se tiver sub-itens, NÃO renderiza o Link do Next, apenas uma div clicável
+    if (hasSubItems) {
+        return <div onClick={handleClick}>{Content}</div>;
+    }
+
+    // Se for um link direto (sem filhos), renderiza o Link normalmente
+    return (
+        <Link href={item.href} onClick={handleClick}>
+            {Content}
+        </Link>
+    );
+};
+
+const menuItems: MenuItem[] = [
+    {
+        label: 'Home',
+        href: '/bem-vindo',
+        color: 'rose',
+        lightAnimationData: homeIcon,
+        darkAnimationData: homeIconDark,
+        description: 'Página inicial'
+    },
+    {
+        label: 'Pessoas',
+        href: '#',
+        color: 'green',
+        lightAnimationData: timeIcon,
+        darkAnimationData: timeIconDark,
+        description: 'Gestão de colaboradores',
+        functionality: 'DASHBOARD',
+        subItems: [
+            {
+                label: 'Colaboradores',
+                href: '/colaboradores',
+                functionality: 'COLLABORATOR'
+            },
+            {
+                label: 'Controle de Acesso',
+                href: '/controle-de-acesso',
+                functionality: 'AUTH_ROLE'
+            }
+        ]
+    },
+];
+
+interface AppSidebarProps {
+    children: React.ReactNode;
+}
+
+export function AppSidebar({ children }: AppSidebarProps) {
+    const [collapsed, setCollapsed] = useState(false);
+    const [mobileOpen, setMobileOpen] = useState(false);
+    const [showLogoutDialog, setShowLogoutDialog] = useState(false);
+    const [dynamicSidebarEnabled, setDynamicSidebarEnabled] = useState(false);
+    const [isDynamicallyExpanded, setIsDynamicallyExpanded] = useState(false);
+    const [openSubmenus, setOpenSubmenus] = useState<Set<string>>(new Set());
+
+    const hoverTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+    const { user, logout } = useAuth();
+    const pathname = usePathname() ?? '';
+
+    useEffect(() => {
+        // Abre automaticamente apenas quando pathname muda, não quando filteredMenuItems muda
+        // Isso previne scroll voltando ao topo
+        menuItems.forEach(item => {
+            if (item.subItems) {
+                const hasActiveSubItem = item.subItems.some(subItem =>
+                    pathname === subItem.href || pathname.startsWith(subItem.href + '/')
+                );
+
+                if (hasActiveSubItem) {
+                    setOpenSubmenus(prev => {
+                        if (prev.has(item.label)) {
+                            return prev;
+                        }
+                        const newSet = new Set(prev);
+                        newSet.add(item.label);
+                        return newSet;
+                    });
+                }
+            }
+        });
+    }, [pathname]);
+
+    const toggleSubmenu = (itemLabel: string) => {
+        setOpenSubmenus(prev => {
+            const newSet = new Set(prev);
+            if (newSet.has(itemLabel)) {
+                newSet.delete(itemLabel);
+            } else {
+                newSet.add(itemLabel);
+            }
+            return newSet;
+        });
+    };
+
+    useEffect(() => {
+        const checkDynamicSidebarSettings = () => {
+            const saved = localStorage.getItem('dynamic-sidebar-enabled');
+            const isDynamicEnabled = saved !== null ? JSON.parse(saved) : false;
+            setDynamicSidebarEnabled(isDynamicEnabled);
+
+            if (isDynamicEnabled) {
+                setCollapsed(true);
+                setIsDynamicallyExpanded(false);
+            }
+        };
+
+        checkDynamicSidebarSettings();
+
+        const handleSettingsChange = (event: CustomEvent) => {
+            setDynamicSidebarEnabled(event.detail.enabled);
+            if (!event.detail.enabled) {
+                setIsDynamicallyExpanded(false);
+            }
+        };
+
+        const handleResetState = () => {
+            setIsDynamicallyExpanded(false);
+        };
+
+        const handleAutoCollapse = () => {
+            setCollapsed(true);
+            setIsDynamicallyExpanded(false);
+        };
+
+        window.addEventListener('dynamic-sidebar-settings-changed', handleSettingsChange as EventListener);
+        window.addEventListener('reset-dynamic-sidebar-state', handleResetState as EventListener);
+        window.addEventListener('auto-collapse-sidebar', handleAutoCollapse as EventListener);
+
+        return () => {
+            window.removeEventListener('dynamic-sidebar-settings-changed', handleSettingsChange as EventListener);
+            window.removeEventListener('reset-dynamic-sidebar-state', handleResetState as EventListener);
+            window.removeEventListener('auto-collapse-sidebar', handleAutoCollapse as EventListener);
+        };
+    }, []);
+
+    const handleSidebarMouseEnter = () => {
+        if (dynamicSidebarEnabled && collapsed && window.innerWidth >= 768) {
+            if (hoverTimeoutRef.current) {
+                clearTimeout(hoverTimeoutRef.current);
+            }
+
+            setIsDynamicallyExpanded(true);
+        }
+    };
+
+    const handleSidebarMouseLeave = () => {
+        if (dynamicSidebarEnabled && collapsed && isDynamicallyExpanded) {
+            if (hoverTimeoutRef.current) {
+                clearTimeout(hoverTimeoutRef.current);
+            }
+
+            setIsDynamicallyExpanded(false);
+        }
+    };
+
+    useEffect(() => {
+        if (!collapsed) {
+            setIsDynamicallyExpanded(false);
+        }
+    }, [collapsed]);
+
+    useEffect(() => {
+        if (!dynamicSidebarEnabled) {
+            setIsDynamicallyExpanded(false);
+        } else {
+            setCollapsed(true);
+            setIsDynamicallyExpanded(false);
+        }
+    }, [dynamicSidebarEnabled]);
+
+    useEffect(() => {
+        return () => {
+            if (hoverTimeoutRef.current) {
+                clearTimeout(hoverTimeoutRef.current);
+            }
+        };
+    }, []);
+
+    const handleLogout = async () => {
+        await logout();
+        setShowLogoutDialog(false);
+    };
+
+    const SidebarContent = ({ collapsed: sidebarCollapsed = collapsed }: { collapsed?: boolean } = {}) => (
+        <div className="flex h-full flex-col">
+            {/* Header */}
+
+            {!sidebarCollapsed && (
+                <div className={`flex h-16 items-center justify-center border-b `}>
+                    <div className="flex items-center px-3 py-2 rounded">
+                        <div className="flex items-center px-5 py-2">
+                            <img
+                                src="/logo.png"
+                                alt="E-collab Logo"
+                                className="h-6 w-auto dark:invert"
+                            />
+                        </div>
+
+                    </div>
+                </div>
+            )}
+
+            {/* User Info */}
+            <div className="border-b p-2 px-3">
+                <div className={`flex items-center gap-2 ${sidebarCollapsed ? 'justify-center' : ''}`}>
+                    <div className="flex h-7 w-7 items-center justify-center rounded-full bg-blue-100 text-blue-600 text-sm font-medium overflow-hidden">
+                        {user?.avatar && typeof user.avatar === 'string' ? (
+                            <img src={user.avatar} alt={user.name} className="w-full h-full object-cover" />
+                        ) : (
+                            user?.name?.charAt(0) || 'U'
+                        )}
+                    </div>
+                    {!sidebarCollapsed && (
+                        <div className="flex flex-col flex-1 transition-all duration-300 ease-in-out">
+                            <div className="flex items-center justify-between transition-opacity duration-300">
+                                <span className="text-sm font-medium">{user?.name}</span>
+                                <SettingsModal collapsed={sidebarCollapsed} />
+                            </div>
+                            <div className="flex items-center gap-1 transition-opacity duration-300">
+                                <Badge variant={user?.roleName === 'Admin' ? 'default' : 'secondary'} className="text-xs h-5 px-1.5">
+                                    {user?.roleName === 'Admin' ? 'Admin' : typeof user?.roleName === 'string' ? user.roleName.toUpperCase() : 'Usuário'}
+                                </Badge>
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            {/* Navigation */}
+            <nav className="flex-1 p-3 overflow-y-auto max-h-[calc(100vh-280px)] scroll-smooth">
+                <div className="space-y-1 flex flex-col gap-1">
+                    {menuItems.map((item) => {
+                        const isActive = pathname === item.href;
+                        const hasSubItems = item.subItems && item.subItems.length > 0;
+                        const isOpen = openSubmenus.has(item.label);
+                        const hasActiveSubItem = item.subItems?.some(subItem =>
+                            pathname === subItem.href || pathname.startsWith(subItem.href + '/')
+                        ) || false;
+
+                        return (
+                            <div key={item.href + item.label}>
+                                <MenuItemComponent
+                                    item={item}
+                                    isActive={isActive || hasActiveSubItem}
+                                    collapsed={sidebarCollapsed}
+                                    hasSubItems={hasSubItems}
+                                    isOpen={isOpen}
+                                    onToggle={() => toggleSubmenu(item.label)}
+                                />
+                                {/* Render sub-items com Animação Suave */}
+                                {hasSubItems && !sidebarCollapsed && (
+                                    <div
+                                        className={cn(
+                                            "grid transition-all duration-300 ease-in-out",
+                                            isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
+                                        )}
+                                        style={{
+                                            transition: 'grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease-in-out'
+                                        }}
+                                    >
+                                        <div className="overflow-hidden flex flex-col gap-1 pt-1">
+                                            {item.subItems!.map((subItem) => {
+                                                const isSubItemActive = pathname === subItem.href || pathname.startsWith(subItem.href + '/');
+                                                return (
+                                                    <SubMenuItemComponent
+                                                        key={subItem.href}
+                                                        item={subItem}
+                                                        isActive={isSubItemActive}
+                                                        collapsed={sidebarCollapsed}
+                                                    />
+                                                );
+                                            })}
+                                        </div>
+                                    </div>
+                                )}
+                            </div>
+                        );
+                    })}
+                </div>
+            </nav>
+
+            <Separator />
+
+            {/* Footer */}
+            <div className="p-3">
+                <div className="space-y-2">
+                    {/* Fullscreen Toggle */}
+                    <ToggleFullScreenModeButton collapsed={sidebarCollapsed} />
+
+                    {/* Theme Toggle */}
+                    <ThemeToggle collapsed={sidebarCollapsed} />
+
+                    {/* Logout Button */}
+                    <Button
+                        variant="ghost"
+                        className={cn(
+                            "w-full justify-start gap-2 px-2 py-2 h-auto text-sm",
+                            sidebarCollapsed && "px-2"
+                        )}
+                        onClick={() => setShowLogoutDialog(true)}
+                        title={sidebarCollapsed ? 'Sair' : undefined}
+                    >
+                        <LogOut className="h-3.5 w-3.5 shrink-0" />
+                        {!sidebarCollapsed && <span className="transition-opacity duration-300">Sair</span>}
+                    </Button>
+
+                    {!sidebarCollapsed && (
+                        <div className="mt-5 pt-3 border-t border-gray-100 dark:border-gray-800 transition-all duration-300 ease-in-out">
+                            <div className="space-y-1.5 transition-opacity duration-300">
+                                <div className="flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400">
+                                    <span className="font-medium">E-collab - Versão 2.0.0</span>
+                                </div>
+
+                                <a
+                                    href="https://lordicon.com/"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="group flex items-center gap-1 text-[9px] text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-200"
+                                >
+                                    <span>Ícones por Lordicon</span>
+                                </a>
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+
+    return (
+        <div className="flex h-screen bg-background">
+            {/* Desktop Sidebar */}
+            <div
+                className={cn(
+                    "hidden md:flex border-r bg-card relative",
+                    collapsed && !isDynamicallyExpanded ? "w-16" : "w-64",
+                    isDynamicallyExpanded && "shadow-xl z-10"
+                )}
+                style={{
+                    transition: isDynamicallyExpanded
+                        ? 'width 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease-in-out'
+                        : 'width 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease-in-out'
+                }}
+                onMouseEnter={handleSidebarMouseEnter}
+                onMouseLeave={handleSidebarMouseLeave}
+            >
+                <div className="flex h-full w-full flex-col relative">
+                    <div
+                        className={cn(
+                            "h-full w-full transition-opacity duration-300",
+                            isDynamicallyExpanded ? "opacity-100" : "opacity-100"
+                        )}
+                    >
+                        <SidebarContent collapsed={collapsed && !isDynamicallyExpanded} />
+                    </div>
+
+                    {!dynamicSidebarEnabled && (
+                        <Button
+                            variant="outline"
+                            size="icon"
+                            className="absolute -right-4 top-6 h-8 w-8 rounded-full border bg-background shadow-md"
+                            onClick={() => {
+                                setCollapsed(!collapsed);
+                                setIsDynamicallyExpanded(false);
+                            }}
+                        >
+                            {collapsed ? (
+                                <ChevronRight className="h-4 w-4" />
+                            ) : (
+                                <ChevronLeft className="h-4 w-4" />
+                            )}
+                        </Button>
+                    )}
+                </div>
+            </div>
+
+            {/* Mobile Sidebar */}
+            {mobileOpen && (
+                <div className="fixed inset-0 z-50 md:hidden">
+                    <div className="fixed inset-0 bg-background/80 backdrop-blur-sm" onClick={() => setMobileOpen(false)} />
+                    <div className="fixed left-0 top-0 h-full w-64 border-r bg-card overflow-y-auto">
+                        <SidebarContent collapsed={false} />
+                    </div>
+                </div>
+            )}
+
+            {/* Main Content */}
+            <div className="flex flex-1 flex-col overflow-hidden">
+                {/* Mobile Header */}
+                <div className="flex h-16 items-center border-b px-4 md:hidden">
+                    <Button
+                        variant="outline"
+                        size="icon"
+                        onClick={() => setMobileOpen(true)}
+                    >
+                        <Menu className="h-6 w-6" />
+                    </Button>
+                    <div className="ml-4 flex items-center gap-2">
+                        <img
+                            src="/logo.png"
+                            alt="E-collab Logo"
+                            className="h-6 w-auto dark:invert"
+                        />
+                    </div>
+                </div>
+
+                {/* Page Content */}
+                <main className="flex-1 overflow-auto">
+                    {children}
+                </main>
+            </div>
+
+            {/* Logout Confirmation Dialog */}
+            <AlertDialog open={showLogoutDialog} onOpenChange={setShowLogoutDialog}>
+                <AlertDialogContent>
+                    <AlertDialogHeader>
+                        <AlertDialogTitle>Confirmar Saída</AlertDialogTitle>
+                        <AlertDialogDescription>
+                            Tem certeza que deseja sair do sistema? Você precisará fazer login novamente para acessar.
+                        </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                        <AlertDialogCancel>Cancelar</AlertDialogCancel>
+                        <AlertDialogAction onClick={handleLogout}>
+                            Sair
+                        </AlertDialogAction>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
+        </div>
+    );
+}