eai-frontend-components 2.0.4

package/src/components/ui/custom/header.tsx

@@ -0,0 +1,128 @@
+import { ReactNode, useEffect, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import LoadingBar, { LoadingBarRef } from 'react-top-loading-bar';
+import { getTailwindColorShades, TailwindColorName } from '../../../lib/help/theme';
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '../breadcrumb';
+import { SidebarTrigger } from '../sidebar';
+import { Module, SidebarPage } from './sidebar/types/sidebar';
+import { DEFAULT_THEME_DATA, useTheme } from './theme-provider';
+
+const Header = ({
+	splittedPath,
+	modules,
+	pages,
+	isLoading,
+	combobox,
+}: { splittedPath: string[]; modules: Module[]; pages: SidebarPage[]; isLoading: boolean; combobox: ReactNode }) => {
+	const { portalDefinitions } = useTheme();
+	const navigate = useNavigate();
+	const refProgressLoading = useRef<LoadingBarRef>(null);
+	const lastPage = splittedPath[splittedPath.length - 1];
+
+	useEffect(() => {
+		isLoading ? refProgressLoading.current?.start() : refProgressLoading.current?.complete();
+	}, [isLoading]);
+
+	const setRouter = (path: string) => {
+		navigate(path);
+	};
+
+	const getPath = (index: number) => {
+		let path = '';
+
+		for (let i = 0; i <= index; i++) {
+			path += `/${splittedPath[i]}`;
+		}
+
+		return path;
+	};
+
+	const getLinkSidebar = (index: number) => {
+		return pages.find((item) => item.path === getPath(index));
+	};
+
+	const getSubMenuItem = (index: number) => {
+		return pages.flatMap((item) => item.subMenuItems || []).find((sub) => sub.path === getPath(index));
+	};
+
+	const getModule = (page: string) => {
+		const module = modules.find((mod) => mod.value === page);
+		if (!module) {
+			return page;
+		}
+
+		return module?.title;
+	};
+
+	const getTitle = (index: number) => {
+		const linkSidebar = getLinkSidebar(index);
+		const subMenuItem = getSubMenuItem(index);
+
+		if (subMenuItem) {
+			return subMenuItem.label;
+		}
+
+		return linkSidebar?.title;
+	};
+
+	const renderBreadcrumbPage = (index: number) => {
+		return <BreadcrumbPage>{getTitle(index)}</BreadcrumbPage>;
+	};
+
+	const renderBreadcrumbLink = (page: string, index: number) => {
+		const linkSidebar = getLinkSidebar(index);
+
+		return linkSidebar?.subMenuType ? (
+			renderBreadcrumbPage(index)
+		) : (
+			<BreadcrumbLink onClick={() => setRouter(getPath(index))} className='cursor-pointer'>
+				{index === 0 ? getModule(page) : getTitle(index)}
+			</BreadcrumbLink>
+		);
+	};
+
+	const renderBreadcrumbItens = () => {
+		const breadcrumbItems: JSX.Element[] = [];
+
+		splittedPath.map((page, index) => {
+			breadcrumbItems.push(
+				<BreadcrumbItem key={`breadcrumb-item-${index}`}>
+					{page === lastPage ? renderBreadcrumbPage(index) : renderBreadcrumbLink(page, index)}
+				</BreadcrumbItem>,
+			);
+			if (page !== lastPage) {
+				breadcrumbItems.push(<BreadcrumbSeparator key={`breadcrumb-separator-${index}`} className='mt-[1px]' />);
+			}
+		});
+
+		return breadcrumbItems;
+	};
+
+	const getColorLoadingBar = () => {
+		const colorShades = getTailwindColorShades();
+		const tailwindColor = portalDefinitions?.mvnoPrimaryColor || DEFAULT_THEME_DATA.mvnoPrimaryColor;
+		const isValidColor = (color: string): color is TailwindColorName => color in colorShades;
+		const colorPallete = isValidColor(tailwindColor) ? colorShades[tailwindColor] : colorShades.violet;
+		return colorPallete[900];
+	};
+
+	return (
+		<header className='flex flex-col justify-between items-center w-full'>
+			<div className='flex justify-between items-center py-3 px-5 w-full'>
+				<div className='flex items-center gap-x-2 h-[40px]'>
+					<SidebarTrigger className='p-5' />
+					<div className='p-2'>
+						<Breadcrumb>
+							<BreadcrumbList>{renderBreadcrumbItens()}</BreadcrumbList>
+						</Breadcrumb>
+					</div>
+				</div>
+
+				<div className='flex items-center'>{combobox}</div>
+			</div>
+			{<LoadingBar ref={refProgressLoading} color={getColorLoadingBar()} height={7} />}
+		</header>
+	);
+};
+
+export default Header;

package/src/components/ui/custom/label.tsx

@@ -0,0 +1,79 @@
+import { Copy } from 'lucide-react';
+import React from 'react';
+import { cn } from '../../../lib/utils';
+import { Button } from '../button';
+import { Skeleton } from '../skeleton';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../tooltip';
+import { toast } from '../use-toast';
+
+interface LabelWithTitleProps {
+	title: string;
+	value: string;
+	value2?: string;
+	required?: boolean;
+	showCopyIcon?: boolean;
+	className?: string;
+	isLoading?: boolean;
+}
+
+const LabelWithTitle: React.FC<LabelWithTitleProps> = ({ title, value, value2, required, showCopyIcon = false, className, isLoading }) => {
+	const handleCopy = () => {
+		if (showCopyIcon && value) {
+			navigator.clipboard.writeText(`${value}${value2 ?? ''}`);
+			toast({
+				title: `"${value}${value2 ?? ''}" foi copiado para a área de transferência.`,
+				variant: 'success',
+			});
+		}
+	};
+
+	return (
+		<div className={cn('flex group', className)}>
+			<div
+				className={cn(
+					'flex flex-col text-sm w-full',
+					showCopyIcon ? 'p-1 rounded-md transition-colors group-hover:bg-sidebar-accent' : 'p-1',
+				)}
+			>
+				<div className='relative'>
+					<div className='flex items-center text-sm font-medium gap-0.5'>
+						<label className='text-default truncate'>{title}</label>
+						{required && <div className='text-red-500 truncate'>*</div>}
+					</div>
+					<div className='grid flex-1 items-center pt-1'>
+						{isLoading ? <Skeleton className='h-5 w-full rounded-lg' /> : <div className='text-zinc-500 truncate'>{value}</div>}
+					</div>
+					{value2 && (
+						<div className='grid flex-1 items-center pt-1'>
+							{isLoading ? <Skeleton className='h-5 w-full rounded-lg' /> : <div className='text-zinc-500 truncate'>{value2}</div>}
+						</div>
+					)}
+					<div
+						className={cn(
+							'pr-1 absolute top-1/2 right-0 -translate-y-1/2 opacity-0 transition-opacity',
+							showCopyIcon && 'group-hover:opacity-100',
+						)}
+					>
+						<TooltipProvider>
+							<Tooltip>
+								<TooltipTrigger asChild>
+									<Button
+										variant='ghost'
+										type='button'
+										className={cn('p-1 h-8', !showCopyIcon && 'cursor-default')}
+										onClick={handleCopy}
+									>
+										<Copy size={16} />
+									</Button>
+								</TooltipTrigger>
+								<TooltipContent>Copiar</TooltipContent>
+							</Tooltip>
+						</TooltipProvider>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default LabelWithTitle;

package/src/components/ui/custom/not-found.tsx

@@ -0,0 +1,30 @@
+import { BarChart2 } from 'lucide-react';
+import { Button } from '../button';
+
+const NotFound = () => {
+	return (
+		<div className="flex flex-col items-center justify-center h-screen bg-[url('/imgs/404.png')] bg-cover bg-no-repeat bg-center">
+			<div className='flex flex-col items-center justify-center gap-8 w-[424px]'>
+				<div className='flex flex-col items-center w-full'>
+					<div className='text-5xl font-extrabold'>404</div>
+					<div className='text-3xl font-semibold'>Página Indisponível</div>
+				</div>
+				<div className='flex text-center text-xl font-semibold text-zinc-500'>
+					A página que você está tentando acessar se encontra indisponível no momento, tente novamente mais tarde
+				</div>
+				<div className='flex justify-center w-full'>
+					<Button
+						onClick={() => {
+							window.location.href = '/';
+						}}
+						className='[&_svg]:size-5'
+					>
+						<BarChart2 />
+						Voltar Para Inicial
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+};
+export default NotFound;

package/src/components/ui/custom/sidebar/module-switcher.tsx

@@ -0,0 +1,58 @@
+import { Check, ChevronsUpDown } from 'lucide-react';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../../dropdown-menu';
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '../../sidebar';
+import SidebarItemTwoLines from './sidebar-item-two-lines';
+import { Module } from './types/sidebar';
+
+interface ModuleSwitcherProps {
+	modules: Module[];
+	activeModule: Module | undefined;
+	onModuleChange: (module: Module) => void;
+}
+
+const ModuleSwitcher = ({
+	modules,
+	activeModule,
+	onModuleChange,
+}: ModuleSwitcherProps) => {
+	const { isMobile } = useSidebar();
+
+	return (
+		<SidebarMenu>
+			<SidebarMenuItem>
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild>
+						<SidebarMenuButton size='lg' className='data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground'>
+							<SidebarItemTwoLines
+								item={{
+									iconLeft: (
+										<div className='flex p-[7.6px] items-center rounded-md bg-background-primary'>{activeModule?.icon}</div>
+									),
+									title: activeModule?.title ?? '',
+									subTitle: activeModule?.subTitle ?? '',
+									iconRight: <ChevronsUpDown size={16} />,
+								}}
+							/>
+						</SidebarMenuButton>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent className='w-[250px] rounded-lg' align='start' side={isMobile ? 'bottom' : 'right'} sideOffset={4}>
+						{modules.map((module) => (
+							<DropdownMenuItem key={`module-switcher-${module.value}`} onClick={() => onModuleChange?.(module)} className='gap-2 p-2'>
+								<SidebarItemTwoLines
+									item={{
+										iconLeft: <div className='flex p-[7.6px] items-center rounded-md bg-background-primary'>{module.icon}</div>,
+										title: module.title,
+										subTitle: module.subTitle,
+										iconRight: activeModule?.value === module.value ? <Check size={16} /> : null,
+									}}
+								/>
+							</DropdownMenuItem>
+						))}
+					</DropdownMenuContent>
+				</DropdownMenu>
+			</SidebarMenuItem>
+		</SidebarMenu>
+	);
+};
+
+export default ModuleSwitcher;

package/src/components/ui/custom/sidebar/nav-footer.tsx

@@ -0,0 +1,35 @@
+import { useLocation, useNavigate } from 'react-router-dom';
+import { SidebarGroup, SidebarGroupContent, SidebarMenu } from '../../sidebar';
+import SidebarItem from './sidebar-item';
+import { SidebarPage } from './types/sidebar';
+
+interface NavFooterProps {
+	pages: SidebarPage[];
+}
+
+const NavFooter = ({pages}: NavFooterProps) => {
+	const navigate = useNavigate();
+	const location = useLocation();
+	const selectedRoutePath = location.pathname;
+
+	return (
+		<SidebarGroup className='p-0'>
+			<SidebarGroupContent>
+				<SidebarMenu>
+					{pages.map((item) => {
+						return (
+							<SidebarItem
+								key={`sidebar-menu-main-${item.path}`}
+								item={item}
+								selectedRoute={selectedRoutePath}
+								onClick={() => navigate(item.path)}
+							/>
+						);
+					})}
+				</SidebarMenu>
+			</SidebarGroupContent>
+		</SidebarGroup>
+	);
+};
+
+export default NavFooter;

package/src/components/ui/custom/sidebar/nav-main.tsx

@@ -0,0 +1,64 @@
+import { useIsMobile } from '@/hooks/use-mobile';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { SidebarGroup, SidebarGroupContent, SidebarMenu } from '../../sidebar';
+import NavSubmenuCollapsible from './nav-submenu-collapsible';
+import NavSubmenuDropdown from './nav-submenu-dropdown';
+import SidebarItem from './sidebar-item';
+import { SidebarPage, SidebarSubmenuType } from './types/sidebar';
+
+interface NavMainProps {
+	pages: SidebarPage[];
+}
+
+const NavMain = ({pages}: NavMainProps) => {
+	const navigate = useNavigate();
+	const location = useLocation();
+	const isMobile = useIsMobile();
+	const selectedRoutePath = location.pathname;
+
+	return (
+		<SidebarGroup>
+			<SidebarGroupContent>
+				<SidebarMenu>
+					{pages.map((item) => {
+						if (item.subMenuType) {
+							if (item.subMenuType === SidebarSubmenuType.COLLAPSIBLE || isMobile) {
+								return (
+									<NavSubmenuCollapsible
+										key={`sidebar-submenu-collapsible-${item.path}`}
+										item={item}
+										selectedRoute={selectedRoutePath}
+										onClick={(path) => navigate(path)}
+									/>
+								);
+							}
+
+							// Deprecated: Use COLLAPSIBLE instead
+							if (item.subMenuType === SidebarSubmenuType.DROPDOWN) {
+								return (
+									<NavSubmenuDropdown
+										key={`sidebar-submenu-dropdown-${item.path}`}
+										item={item}
+										selectedRoute={selectedRoutePath}
+										onClick={(path) => navigate(path)}
+										cols={3}
+									/>
+								);
+							}
+						}
+						return (
+							<SidebarItem
+								key={`sidebar-menu-main-${item.path}`}
+								item={item}
+								selectedRoute={selectedRoutePath}
+								onClick={() => navigate(item.path)}
+							/>
+						);
+					})}
+				</SidebarMenu>
+			</SidebarGroupContent>
+		</SidebarGroup>
+	);
+};
+
+export default NavMain;

package/src/components/ui/custom/sidebar/nav-submenu-collapsible.tsx

@@ -0,0 +1,60 @@
+import { ChevronRight } from 'lucide-react';
+import { cn } from '../../../../lib/utils';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../../collapsible';
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, useSidebar } from '../../sidebar';
+import { SidebarPage } from './types/sidebar';
+
+interface NavSubmenuCollapsibleProps {
+	item: SidebarPage;
+	selectedRoute: string | null;
+	onClick: (path: string) => void;
+}
+
+const NavSubmenuCollapsible = ({ item, selectedRoute, onClick }: NavSubmenuCollapsibleProps) => {
+	const { open, toggleSidebar } = useSidebar();
+
+	const isOpen = (): boolean => {
+		return selectedRoute?.includes(item.path) ?? false;
+	};
+
+	const handleToggleSidebar = () => {
+		if (!open) toggleSidebar();
+	};
+
+	return (
+		<SidebarMenu>
+			<Collapsible key={item.title} asChild defaultOpen={isOpen()}>
+				<SidebarMenuItem>
+					<CollapsibleTrigger asChild className='group/collapsible'>
+						<SidebarMenuButton tooltip={item.title} className='px-2 py-5 gap-3' onClick={() => handleToggleSidebar()}>
+							{item.icon}
+							<span>{item.title}</span>
+							<ChevronRight className='ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90' />
+						</SidebarMenuButton>
+					</CollapsibleTrigger>
+					<CollapsibleContent>
+						<SidebarMenuSub>
+							{item.subMenuItems
+								?.map((subItem) => (
+									<SidebarMenuSubItem key={subItem.label}>
+										<SidebarMenuSubButton asChild onClick={() => onClick(subItem.path)} aria-disabled={subItem.disabled}>
+											<div
+												className={cn(
+													'cursor-pointer px-2 py-1 items-center self-stretch',
+													selectedRoute === subItem.path ? 'bg-sidebar-accent' : '',
+												)}
+											>
+												<span>{subItem.label}</span>
+											</div>
+										</SidebarMenuSubButton>
+									</SidebarMenuSubItem>
+								))}
+						</SidebarMenuSub>
+					</CollapsibleContent>
+				</SidebarMenuItem>
+			</Collapsible>
+		</SidebarMenu>
+	);
+};
+
+export default NavSubmenuCollapsible;

package/src/components/ui/custom/sidebar/nav-submenu-dropdown.tsx

@@ -0,0 +1,56 @@
+import { ChevronRight } from 'lucide-react';
+import { cn } from '../../../../lib/utils';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../../dropdown-menu';
+import { SidebarMenuButton, SidebarMenuItem } from '../../sidebar';
+import { SidebarPage } from './types/sidebar';
+
+interface NavSubmenuDropdownProps {
+	cols?: number;
+	item: SidebarPage;
+	selectedRoute: string | null;
+	onClick: (path: string) => void;
+}
+
+const NavSubmenuDropdown = ({ cols, item, selectedRoute, onClick }: NavSubmenuDropdownProps) => {
+	return (
+		<SidebarMenuItem>
+			<DropdownMenu>
+				<DropdownMenuTrigger asChild>
+					<SidebarMenuButton
+						asChild
+						className={cn(
+							'data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground hover:bg-sidebar-accent px-2 py-5 gap-3 cursor-pointer',
+							selectedRoute?.includes(item.path) ? 'bg-sidebar-accent' : '',
+						)}
+						tooltip={item.title}
+					>
+						<div>
+							{item.icon}
+							<span>{item.title}</span>
+							{<ChevronRight className='ml-auto' />}
+						</div>
+					</SidebarMenuButton>
+				</DropdownMenuTrigger>
+				<DropdownMenuContent className={`grid grid-cols-${cols ?? '1'} gap-4 p-4`} align='start' side='right' sideOffset={4}>
+					{item.subMenuItems
+						?.map((subItem, index) => (
+							<DropdownMenuItem
+								key={`${index}`}
+								className={cn(
+									'flex flex-col items-start text-left max-w-[220px] gap-1 cursor-pointer',
+									selectedRoute === subItem.path ? 'bg-sidebar-accent' : '',
+								)}
+								onClick={() => onClick(subItem.path)}
+								disabled={subItem.disabled}
+							>
+								<div className='text-sm font-semibold'>{subItem.label}</div>
+								<div className='text-sm text-muted-foreground'>{subItem.description}</div>
+							</DropdownMenuItem>
+						))}
+				</DropdownMenuContent>
+			</DropdownMenu>
+		</SidebarMenuItem>
+	);
+};
+
+export default NavSubmenuDropdown;

package/src/components/ui/custom/sidebar/nav-user.tsx

@@ -0,0 +1,77 @@
+import { LoaderCircle, LogOut } from 'lucide-react';
+import { useState } from 'react';
+import { Avatar, AvatarFallback, AvatarImage } from '../../avatar';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger } from '../../dropdown-menu';
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '../../sidebar';
+import SidebarItemTwoLines from './sidebar-item-two-lines';
+
+interface NavUserProps {
+  userName: string;
+  userEmail: string;
+  userInitials: string;
+  callbackLogout: () => void;
+}
+
+const NavUser = ({userName, userEmail, userInitials, callbackLogout}: NavUserProps) => {
+	const [isLoggingOut, setIsLoggingOut] = useState(false);
+	const { isMobile } = useSidebar();
+
+	const handleLogout = () => {
+		setIsLoggingOut(true);
+		setTimeout(() => {
+			callbackLogout();
+		}, 1000);
+	};
+
+	return (
+		<SidebarMenu>
+			<SidebarMenuItem>
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild>
+						<SidebarMenuButton size='lg' className='data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground'>
+							<SidebarItemTwoLines
+								item={{
+									iconLeft: (
+										<Avatar className='h-[31px] w-[31px] rounded-md'>
+											<AvatarImage src={userInitials} alt={userName} />
+											<AvatarFallback className='rounded-md bg-background-primary text-white'>{userInitials}</AvatarFallback>
+										</Avatar>
+									),
+									title: isLoggingOut ? 'Saindo...' : userName,
+									subTitle: isLoggingOut ? '' : userEmail,
+									iconRight: isLoggingOut ? (
+										<LoaderCircle size={16} className='text-sidebar-foreground animate-spin mr-2' />
+									) : (
+										<LogOut size={16} className='text-sidebar-foreground' />
+									),
+								}}
+							/>
+						</SidebarMenuButton>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent className='w-[250px] rounded-lg' side={isMobile ? 'bottom' : 'right'} align='end' sideOffset={4}>
+						<DropdownMenuLabel className='p-0 font-normal'>
+							<div className='flex items-center gap-2 px-1 py-1.5 text-left text-sm'>
+								<Avatar className='h-8 w-8 rounded-lg'>
+									<AvatarImage src={userInitials} alt={userName} />
+									<AvatarFallback className='rounded-lg bg-background-primary text-white'>{userInitials}</AvatarFallback>
+								</Avatar>
+								<div className='grid flex-1 text-left text-sm leading-tight'>
+									<span className='truncate font-semibold'>{userName}</span>
+									<span className='truncate text-xs'>{userEmail}</span>
+								</div>
+							</div>
+						</DropdownMenuLabel>
+						<DropdownMenuItem className='p-0 font-normal cursor-pointer' onClick={() => handleLogout()}>
+							<div className='flex items-center gap-2 px-1 py-1.5 text-left text-sm'>
+								<div className='flex w-8 h-8 p-2 items-center rounded-md'>{<LogOut size={16} />}</div>
+								Log out
+							</div>
+						</DropdownMenuItem>
+					</DropdownMenuContent>
+				</DropdownMenu>
+			</SidebarMenuItem>
+		</SidebarMenu>
+	);
+};
+
+export default NavUser;

package/src/components/ui/custom/sidebar/sidebar-button.tsx

@@ -0,0 +1,30 @@
+import { cn } from '../../../../lib/utils';
+import { SidebarMenuButton } from '../../sidebar';
+import { Module, SidebarPage } from './types/sidebar';
+
+interface SidebarItemProps {
+	item: SidebarPage;
+	selectedRoute: string | null;
+	onClick?: (module: Module | null, path: string) => void;
+}
+
+const SidebarButton = ({ item, selectedRoute, onClick }: SidebarItemProps) => {
+	return (
+		<SidebarMenuButton
+			asChild
+			className={cn(
+				'data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground hover:bg-sidebar-accent px-2 py-5 gap-3 cursor-pointer',
+				selectedRoute?.includes(item.path) ? 'bg-sidebar-accent' : '',
+			)}
+			tooltip={item.title}
+			onClick={() => onClick?.(item.module ?? null, item.path)}
+		>
+			<div>
+				<div className='[&_svg]:size-4 text-sidebar-foreground'>{item.icon}</div>
+				<span>{item.title}</span>
+			</div>
+		</SidebarMenuButton>
+	);
+};
+
+export default SidebarButton;

package/src/components/ui/custom/sidebar/sidebar-item-two-lines.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+interface SidebarItemTwoLinesProps {
+	item: {
+		iconLeft: React.ReactNode;
+		title: string;
+		subTitle: string;
+		iconRight?: React.ReactNode | null;
+	};
+}
+
+const SidebarItemTwoLines = ({ item }: SidebarItemTwoLinesProps) => {
+	return (
+		<>
+			<div className='[&_svg]:size-4 text-white'>{item.iconLeft}</div>
+			<div className='grid flex-1 text-left text-sm leading-tight'>
+				<span className='truncate font-semibold'>{item.title}</span>
+				<span className='truncate text-xs text-foreground'>{item.subTitle}</span>
+			</div>
+			{item.iconRight}
+		</>
+	);
+};
+
+export default SidebarItemTwoLines;

package/src/components/ui/custom/sidebar/sidebar-item.tsx

@@ -0,0 +1,19 @@
+import { SidebarMenuItem } from '../../sidebar';
+import SidebarButton from './sidebar-button';
+import { Module, SidebarPage } from './types/sidebar';
+
+interface SidebarItemProps {
+	item: SidebarPage;
+	selectedRoute: string | null;
+	onClick?: (module: Module | null, path: string) => void;
+}
+
+const SidebarItem = ({ item, selectedRoute, onClick }: SidebarItemProps) => {
+	return (
+		<SidebarMenuItem>
+			<SidebarButton item={item} selectedRoute={selectedRoute} onClick={onClick} />
+		</SidebarMenuItem>
+	);
+};
+
+export default SidebarItem;