@create-lft-app/cli 1.0.14 → 1.1.0

package/templates/components/layout/midday-sidebar.tsx

@@ -1,381 +0,0 @@
-'use client'
-
-import Link from 'next/link'
-import { usePathname } from 'next/navigation'
-import { useState, useRef, useCallback, useEffect } from 'react'
-import { cn } from '@/lib/utils'
-import { Icons } from '@/components/ui/icons'
-import { useSidebar } from './sidebar-context'
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuSeparator,
-	DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
-import { Avatar, AvatarFallback } from '@/components/ui/avatar'
-import { logoutAction } from '@/modules/auth/actions/auth-actions'
-
-interface NavItem {
-	path: string
-	name: string
-	icon: keyof typeof Icons
-	children?: { path: string; name: string }[]
-}
-
-const mainNavItems: NavItem[] = [
-	{
-		path: '/dashboard',
-		name: 'Dashboard',
-		icon: 'Dashboard',
-	},
-	{
-		path: '/clientes',
-		name: 'Clientes',
-		icon: 'Users',
-	},
-	{
-		path: '/onboarding',
-		name: 'Onboarding',
-		icon: 'UserPlus',
-	},
-	{
-		path: '/documents',
-		name: 'Documentos',
-		icon: 'Documents',
-	},
-	{
-		path: '/alerts',
-		name: 'Alertas',
-		icon: 'Alert',
-	},
-	{
-		path: '/operations',
-		name: 'Operaciones',
-		icon: 'Operations',
-	},
-	{
-		path: '/calendar',
-		name: 'Calendario',
-		icon: 'Calendar',
-	},
-]
-
-const getConfigNavItems = (isSuperAdmin: boolean): NavItem[] => [
-	{
-		path: '/settings',
-		name: 'Configuración',
-		icon: 'Settings',
-		children: [
-			{ path: '/settings', name: 'General' },
-			{ path: '/settings/organization', name: 'Organización' },
-			{ path: '/settings/documents', name: 'Documentos' },
-			{ path: '/settings/onboarding', name: 'Onboarding' },
-			{ path: '/settings/integrations', name: 'Integraciones' },
-			...(isSuperAdmin ? [{ path: '/admin', name: 'Super Admin' }] : []),
-		],
-	},
-]
-
-interface MiddaySidebarProps {
-	user: {
-		email: string
-		full_name: string | null
-		role: string
-		organization?: {
-			name: string
-		} | null
-	} | null
-}
-
-function MenuItem({
-	item,
-	isExpanded,
-	pathname,
-	onNavigate,
-}: {
-	item: NavItem
-	isExpanded: boolean
-	pathname: string
-	onNavigate?: () => void
-}) {
-	const [isSubmenuOpen, setIsSubmenuOpen] = useState(false)
-	const timeoutRef = useRef<NodeJS.Timeout | null>(null)
-	const IconComponent = Icons[item.icon]
-	
-	const isExactMatch = pathname === item.path
-	const isChildMatch = item.children?.some(child => pathname === child.path)
-	const isActive = isExactMatch || isChildMatch
-	const hasChildren = item.children && item.children.length > 0
-
-	const handleMouseEnter = useCallback(() => {
-		if (timeoutRef.current) {
-			clearTimeout(timeoutRef.current)
-		}
-		if (hasChildren) {
-			setIsSubmenuOpen(true)
-		}
-	}, [hasChildren])
-
-	const handleMouseLeave = useCallback(() => {
-		timeoutRef.current = setTimeout(() => {
-			setIsSubmenuOpen(false)
-		}, 150)
-	}, [])
-
-	return (
-		<li 
-			className="relative"
-			onMouseEnter={handleMouseEnter}
-			onMouseLeave={handleMouseLeave}
-		>
-			<Link
-				href={hasChildren && item.children ? item.children[0].path : item.path}
-				onClick={onNavigate}
-				className={cn(
-					'h-[40px] flex items-center gap-3',
-					'mx-[10px] px-[10px]',
-					'rounded-md',
-					'transition-all duration-150',
-					!isActive && 'hover:bg-[#f7f7f7] dark:hover:bg-[#1a1a1a]',
-					isActive && [
-						'bg-[#f7f7f7] dark:bg-[#131313]',
-						'border border-border',
-					]
-				)}
-			>
-				<div className="w-5 h-5 flex items-center justify-center flex-shrink-0">
-					<IconComponent 
-						size={20} 
-						className={cn(
-							'transition-colors',
-							isActive ? 'text-foreground' : 'text-[#878787]'
-						)} 
-					/>
-				</div>
-				{isExpanded && (
-					<>
-						<span
-							className={cn(
-								'text-sm whitespace-nowrap',
-								'transition-all duration-150',
-								isActive ? 'font-medium text-foreground' : 'text-[#878787]'
-							)}
-						>
-							{item.name}
-						</span>
-						{hasChildren && (
-							<Icons.ChevronRight
-								size={14}
-								className={cn(
-									'ml-auto text-[#878787]',
-									'transition-transform duration-200',
-									isSubmenuOpen && 'rotate-90'
-								)}
-							/>
-						)}
-					</>
-				)}
-			</Link>
-
-			{/* Submenu - Midday style with staggered animation */}
-			{hasChildren && isExpanded && isSubmenuOpen && (
-				<ul className="mt-1 space-y-0.5">
-					{item.children?.map((child, index) => {
-						const isChildActive = pathname === child.path
-						return (
-							<li
-								key={child.path}
-								className="animate-in fade-in-0 slide-in-from-left-1"
-								style={{ 
-									animationDuration: '150ms',
-									animationDelay: `${40 + index * 20}ms`,
-									animationFillMode: 'backwards'
-								}}
-							>
-								<div className="ml-[35px] border-l border-[#e6e6e6] dark:border-[#2c2c2c]">
-									<Link
-										href={child.path}
-										onClick={onNavigate}
-										className={cn(
-											'block py-1.5 pl-3 pr-4',
-											'text-xs',
-											'transition-colors duration-150',
-											isChildActive 
-												? 'text-foreground font-medium' 
-												: 'text-[#888] hover:text-foreground'
-										)}
-									>
-										{child.name}
-									</Link>
-								</div>
-							</li>
-						)
-					})}
-				</ul>
-			)}
-		</li>
-	)
-}
-
-function UserDropdown({
-	user,
-	isExpanded,
-}: {
-	user: MiddaySidebarProps['user']
-	isExpanded: boolean
-}) {
-	const initials = user?.full_name
-		? user.full_name
-				.split(' ')
-				.map((n) => n[0])
-				.join('')
-				.toUpperCase()
-				.slice(0, 2)
-		: user?.email?.slice(0, 2).toUpperCase() || 'U'
-
-	return (
-		<DropdownMenu>
-			<DropdownMenuTrigger asChild>
-				<button
-					className={cn(
-						'flex items-center gap-3',
-						'w-[calc(100%-20px)] mx-[10px] px-[10px] py-2',
-						'rounded-md',
-						'hover:bg-[#f7f7f7] dark:hover:bg-[#1a1a1a]',
-						'transition-colors duration-150',
-						'focus:outline-none focus-visible:ring-1 focus-visible:ring-ring'
-					)}
-				>
-					<Avatar className="h-8 w-8 flex-shrink-0">
-						<AvatarFallback className="bg-primary text-primary-foreground text-xs font-medium">
-							{initials}
-						</AvatarFallback>
-					</Avatar>
-					{isExpanded && (
-						<div className="flex-1 text-left overflow-hidden min-w-0">
-							<p className="text-sm font-medium truncate leading-tight">
-								{user?.full_name || 'Usuario'}
-							</p>
-							<p className="text-xs text-[#878787] truncate leading-tight">
-								{user?.email}
-							</p>
-						</div>
-					)}
-				</button>
-			</DropdownMenuTrigger>
-			<DropdownMenuContent 
-				align="start" 
-				side="top"
-				sideOffset={8}
-				className="w-56"
-			>
-				<div className="px-2 py-1.5">
-					<p className="text-sm font-medium">{user?.full_name || 'Usuario'}</p>
-					<p className="text-xs text-[#878787]">{user?.email}</p>
-				</div>
-				<DropdownMenuSeparator />
-				<DropdownMenuItem asChild>
-					<Link href="/settings" className="cursor-pointer">
-						<Icons.Settings size={16} className="mr-2 text-[#878787]" />
-						<span>Configuración</span>
-					</Link>
-				</DropdownMenuItem>
-				<DropdownMenuSeparator />
-				<DropdownMenuItem
-					className="text-destructive focus:text-destructive cursor-pointer"
-					onClick={() => logoutAction()}
-				>
-					<Icons.LogOut size={16} className="mr-2" />
-					<span>Cerrar sesión</span>
-				</DropdownMenuItem>
-			</DropdownMenuContent>
-		</DropdownMenu>
-	)
-}
-
-export function MiddaySidebar({ user }: MiddaySidebarProps) {
-	const { isExpanded, setIsExpanded } = useSidebar()
-	const pathname = usePathname()
-	const sidebarRef = useRef<HTMLDivElement>(null)
-	const hoverTimeoutRef = useRef<NodeJS.Timeout | null>(null)
-
-	const isAdmin = user?.role && ['admin', 'super_admin'].includes(user.role)
-	const isSuperAdmin = user?.role === 'super_admin'
-	const configNavItems = getConfigNavItems(isSuperAdmin)
-
-	const handleMouseEnter = useCallback(() => {
-		if (hoverTimeoutRef.current) {
-			clearTimeout(hoverTimeoutRef.current)
-		}
-		setIsExpanded(true)
-	}, [setIsExpanded])
-
-	const handleMouseLeave = useCallback(() => {
-		hoverTimeoutRef.current = setTimeout(() => {
-			setIsExpanded(false)
-		}, 100)
-	}, [setIsExpanded])
-
-	return (
-		<aside
-			ref={sidebarRef}
-			className={cn(
-				'h-screen flex-shrink-0 flex-col justify-between fixed top-0 left-0 hidden md:flex z-50',
-				'bg-background border-r border-border',
-				'transition-[width] duration-200 ease-[cubic-bezier(0.4,0,0.2,1)]',
-				isExpanded ? 'w-[240px]' : 'w-[70px]'
-			)}
-			onMouseEnter={handleMouseEnter}
-			onMouseLeave={handleMouseLeave}
-		>
-			{/* Header / Logo - Midday style */}
-			<div 
-				className={cn(
-					"absolute top-0 left-0 h-[70px] flex items-center justify-center bg-background border-b border-border transition-all duration-200 ease-[cubic-bezier(0.4,0,0.2,1)]",
-					isExpanded ? "w-full" : "w-[69px]"
-				)}
-			>
-				<Link href="/dashboard" className="absolute left-[22px] transition-none">
-					{/* eslint-disable-next-line @next/next/no-img-element */}
-					<img src="/logolft.svg" alt="Logo" className="h-7 w-7" />
-				</Link>
-			</div>
-
-			{/* Navigation - Midday style */}
-			<nav className="flex-1 pt-[70px] pb-4 overflow-y-auto scrollbar-hide border-b border-border">
-				<ul className="space-y-1">
-					{mainNavItems.map((item) => (
-						<MenuItem
-							key={item.path}
-							item={item}
-							isExpanded={isExpanded}
-							pathname={pathname}
-						/>
-					))}
-				</ul>
-
-				{/* Admin section with separator */}
-				{isAdmin && (
-					<div className="mt-6 pt-4 mx-[10px] border-t border-border">
-						<ul className="space-y-1">
-							{configNavItems.map((item) => (
-								<MenuItem
-									key={item.path}
-									item={item}
-									isExpanded={isExpanded}
-									pathname={pathname}
-								/>
-							))}
-						</ul>
-					</div>
-				)}
-			</nav>
-
-			{/* User section - Midday style */}
-			<div className="border-t border-border py-3">
-				<UserDropdown user={user} isExpanded={isExpanded} />
-			</div>
-		</aside>
-	)
-}

package/templates/components/layout/nav-user.tsx

@@ -1,108 +0,0 @@
-'use client'
-
-import { logout } from '@/modules/auth/actions/auth-actions'
-import { Avatar, AvatarFallback } from '@/components/ui/avatar'
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuLabel,
-	DropdownMenuSeparator,
-	DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
-import { SidebarMenuButton } from '@/components/ui/sidebar'
-import { ChevronsUpDown, LogOut, User } from 'lucide-react'
-import { Badge } from '@/components/ui/badge'
-
-interface NavUserProps {
-	user: {
-		email: string
-		full_name: string | null
-		role: string
-	} | null
-}
-
-const roleLabels: Record<string, string> = {
-	super_admin: 'Super Admin',
-	admin: 'Administrador',
-	compliance: 'Compliance',
-	analyst: 'Analista',
-}
-
-export function NavUser({ user }: NavUserProps) {
-	if (!user) return null
-
-	const initials = user.full_name
-		? user.full_name
-				.split(' ')
-				.map((n) => n[0])
-				.join('')
-				.toUpperCase()
-				.slice(0, 2)
-		: user.email.slice(0, 2).toUpperCase()
-
-	return (
-		<DropdownMenu>
-			<DropdownMenuTrigger asChild>
-				<SidebarMenuButton
-					size="lg"
-					className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-				>
-					<Avatar className="h-8 w-8">
-						<AvatarFallback className="bg-primary text-primary-foreground text-xs">
-							{initials}
-						</AvatarFallback>
-					</Avatar>
-					<div className="grid flex-1 text-left text-sm leading-tight">
-						<span className="truncate font-semibold">
-							{user.full_name || user.email}
-						</span>
-						<span className="truncate text-xs text-muted-foreground">
-							{user.email}
-						</span>
-					</div>
-					<ChevronsUpDown className="ml-auto size-4" />
-				</SidebarMenuButton>
-			</DropdownMenuTrigger>
-			<DropdownMenuContent
-				className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
-				side="bottom"
-				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">
-							<AvatarFallback className="bg-primary text-primary-foreground text-xs">
-								{initials}
-							</AvatarFallback>
-						</Avatar>
-						<div className="grid flex-1 text-left text-sm leading-tight">
-							<span className="truncate font-semibold">
-								{user.full_name || user.email}
-							</span>
-							<Badge variant="secondary" className="w-fit text-xs">
-								{roleLabels[user.role] || user.role}
-							</Badge>
-						</div>
-					</div>
-				</DropdownMenuLabel>
-				<DropdownMenuSeparator />
-				<DropdownMenuItem asChild>
-					<a href="/settings/profile" className="cursor-pointer">
-						<User className="mr-2 h-4 w-4" />
-						Mi Perfil
-					</a>
-				</DropdownMenuItem>
-				<DropdownMenuSeparator />
-				<DropdownMenuItem
-					className="cursor-pointer text-destructive focus:text-destructive"
-					onClick={() => logout()}
-				>
-					<LogOut className="mr-2 h-4 w-4" />
-					Cerrar sesión
-				</DropdownMenuItem>
-			</DropdownMenuContent>
-		</DropdownMenu>
-	)
-}

package/templates/components/layout/page-header.tsx

@@ -1,95 +0,0 @@
-import { cn } from '@/lib/utils'
-
-interface PageHeaderProps {
-	title: string
-	description?: string
-	children?: React.ReactNode
-	className?: string
-}
-
-export function PageHeader({ title, description, children, className }: PageHeaderProps) {
-	return (
-		<header className={cn('h-[70px] flex items-center border-b border-border px-6', className)}>
-			<div className="flex items-center justify-between w-full">
-				<div>
-					<h1 className="text-lg font-medium">{title}</h1>
-					{description && (
-						<p className="text-xs text-[#878787]">{description}</p>
-					)}
-				</div>
-				{children && (
-					<div className="flex items-center gap-2">
-						{children}
-					</div>
-				)}
-			</div>
-		</header>
-	)
-}
-
-interface PageContentProps {
-	children: React.ReactNode
-	className?: string
-}
-
-export function PageContent({ children, className }: PageContentProps) {
-	return (
-		<div className={cn('flex-1 overflow-auto p-6', className)}>
-			{children}
-		</div>
-	)
-}
-
-interface PageContainerProps {
-	children: React.ReactNode
-	className?: string
-}
-
-export function PageContainer({ children, className }: PageContainerProps) {
-	return (
-		<div className={cn('flex flex-col h-screen', className)}>
-			{children}
-		</div>
-	)
-}
-
-interface StatItemProps {
-	label: string
-	value: string | number
-	trend?: {
-		value: number
-		positive?: boolean
-	}
-}
-
-export function StatItem({ label, value, trend }: StatItemProps) {
-	return (
-		<div className="border border-border bg-background p-6">
-			<p className="text-sm text-[#878787] mb-3">{label}</p>
-			<div className="flex items-baseline gap-2">
-				<span className="text-2xl font-normal tabular-nums">{value}</span>
-				{trend && (
-					<span className={cn(
-						'text-xs',
-						trend.positive ? 'text-[#00C48C]' : 'text-[#FF3B3B]'
-					)}>
-						{trend.positive ? '+' : ''}{trend.value}%
-					</span>
-				)}
-			</div>
-		</div>
-	)
-}
-
-interface StatsRowProps {
-	children: React.ReactNode
-	className?: string
-}
-
-export function StatsRow({ children, className }: StatsRowProps) {
-	return (
-		<div className={cn('grid grid-cols-4 gap-6', className)}>
-			{children}
-		</div>
-	)
-}

package/templates/components/layout/sidebar-context.tsx

@@ -1,33 +0,0 @@
-'use client'
-
-import { createContext, useContext, useState, useCallback, ReactNode } from 'react'
-
-interface SidebarContextType {
-	isExpanded: boolean
-	setIsExpanded: (value: boolean) => void
-	expand: () => void
-	collapse: () => void
-}
-
-const SidebarContext = createContext<SidebarContextType | undefined>(undefined)
-
-export function SidebarProvider({ children }: { children: ReactNode }) {
-	const [isExpanded, setIsExpanded] = useState(false)
-
-	const expand = useCallback(() => setIsExpanded(true), [])
-	const collapse = useCallback(() => setIsExpanded(false), [])
-
-	return (
-		<SidebarContext.Provider value={{ isExpanded, setIsExpanded, expand, collapse }}>
-			{children}
-		</SidebarContext.Provider>
-	)
-}
-
-export function useSidebar() {
-	const context = useContext(SidebarContext)
-	if (context === undefined) {
-		throw new Error('useSidebar must be used within a SidebarProvider')
-	}
-	return context
-}