@create-lft-app/cli 1.0.13 → 1.1.0

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

@@ -1,146 +0,0 @@
-'use client'
-
-import Link from 'next/link'
-import { usePathname } from 'next/navigation'
-import {
-	LayoutDashboard,
-	Building2,
-	Users,
-	CreditCard,
-	Settings,
-	Shield,
-	Clock,
-} from 'lucide-react'
-import {
-	Sidebar,
-	SidebarContent,
-	SidebarGroup,
-	SidebarGroupContent,
-	SidebarGroupLabel,
-	SidebarMenu,
-	SidebarMenuButton,
-	SidebarMenuItem,
-	SidebarHeader,
-	SidebarFooter,
-} from '@/components/ui/sidebar'
-import { NavUser } from './nav-user'
-
-const adminNavItems = [
-	{
-		title: 'Dashboard',
-		url: '/admin',
-		icon: LayoutDashboard,
-	},
-	{
-		title: 'Organizaciones',
-		url: '/admin/organizations',
-		icon: Building2,
-	},
-	{
-		title: 'Usuarios',
-		url: '/admin/users',
-		icon: Users,
-	},
-	{
-		title: 'Suscripciones',
-		url: '/admin/subscriptions',
-		icon: CreditCard,
-	},
-]
-
-const systemNavItems = [
-	{
-		title: 'Jobs',
-		url: '/admin/jobs',
-		icon: Clock,
-	},
-	{
-		title: 'Configuración',
-		url: '/admin/settings',
-		icon: Settings,
-	},
-]
-
-interface AdminSidebarProps {
-	user: {
-		email: string
-		full_name: string | null
-		role: string
-	} | null
-}
-
-export function AdminSidebar({ user }: AdminSidebarProps) {
-	const pathname = usePathname()
-
-	return (
-		<Sidebar>
-			<SidebarHeader className="border-b border-sidebar-border">
-				<div className="flex items-center gap-2 px-4 py-3">
-					<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-destructive text-destructive-foreground font-bold">
-						<Shield className="h-4 w-4" />
-					</div>
-					<div className="flex flex-col">
-						<span className="text-sm font-semibold">
-							{user?.full_name?.split(' ')[0] || 'Admin'}
-						</span>
-						<span className="text-xs text-muted-foreground">
-							Super Admin
-						</span>
-					</div>
-				</div>
-			</SidebarHeader>
-
-			<SidebarContent>
-				<SidebarGroup>
-					<SidebarGroupLabel>Gestión</SidebarGroupLabel>
-					<SidebarGroupContent>
-						<SidebarMenu>
-							{adminNavItems.map((item) => (
-								<SidebarMenuItem key={item.title}>
-									<SidebarMenuButton
-										asChild
-										isActive={
-											item.url === '/admin'
-												? pathname === '/admin'
-												: pathname.startsWith(item.url)
-										}
-									>
-										<Link href={item.url}>
-											<item.icon className="h-4 w-4" />
-											<span>{item.title}</span>
-										</Link>
-									</SidebarMenuButton>
-								</SidebarMenuItem>
-							))}
-						</SidebarMenu>
-					</SidebarGroupContent>
-				</SidebarGroup>
-
-				<SidebarGroup>
-					<SidebarGroupLabel>Sistema</SidebarGroupLabel>
-					<SidebarGroupContent>
-						<SidebarMenu>
-							{systemNavItems.map((item) => (
-								<SidebarMenuItem key={item.title}>
-									<SidebarMenuButton
-										asChild
-										isActive={pathname.startsWith(item.url)}
-									>
-										<Link href={item.url}>
-											<item.icon className="h-4 w-4" />
-											<span>{item.title}</span>
-										</Link>
-									</SidebarMenuButton>
-								</SidebarMenuItem>
-							))}
-						</SidebarMenu>
-					</SidebarGroupContent>
-				</SidebarGroup>
-			</SidebarContent>
-
-			<SidebarFooter className="border-t border-sidebar-border">
-				<NavUser user={user} />
-			</SidebarFooter>
-		</Sidebar>
-	)
-}

package/templates/components/layout/header.tsx

@@ -1,71 +0,0 @@
-'use client'
-
-import { Bell } from 'lucide-react'
-import { Button } from '@/components/ui/button'
-import { SidebarTrigger } from '@/components/ui/sidebar'
-import { Separator } from '@/components/ui/separator'
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuLabel,
-	DropdownMenuSeparator,
-	DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
-import { Badge } from '@/components/ui/badge'
-
-interface HeaderProps {
-	title?: string
-}
-
-export function Header({ title }: HeaderProps) {
-	return (
-		<header className="flex h-14 shrink-0 items-center gap-2 border-b px-4">
-			<SidebarTrigger className="-ml-1" />
-			<Separator orientation="vertical" className="mr-2 h-4" />
-			{title && <h1 className="text-lg font-semibold">{title}</h1>}
-
-			<div className="ml-auto flex items-center gap-2">
-				<DropdownMenu>
-					<DropdownMenuTrigger asChild>
-						<Button variant="ghost" size="icon" className="relative">
-							<Bell className="h-5 w-5" />
-							<Badge
-								variant="destructive"
-								className="absolute -right-1 -top-1 h-5 w-5 rounded-full p-0 text-xs flex items-center justify-center"
-							>
-								3
-							</Badge>
-						</Button>
-					</DropdownMenuTrigger>
-					<DropdownMenuContent align="end" className="w-80">
-						<DropdownMenuLabel>Notificaciones</DropdownMenuLabel>
-						<DropdownMenuSeparator />
-						<DropdownMenuItem className="flex flex-col items-start gap-1 cursor-pointer">
-							<span className="font-medium">Documento por vencer</span>
-							<span className="text-xs text-muted-foreground">
-								Balance de Empresa ABC S.A. vence en 7 días
-							</span>
-						</DropdownMenuItem>
-						<DropdownMenuItem className="flex flex-col items-start gap-1 cursor-pointer">
-							<span className="font-medium">Nueva alerta BCRA</span>
-							<span className="text-xs text-muted-foreground">
-								Se detectó deuda en situación 3 para cliente
-							</span>
-						</DropdownMenuItem>
-						<DropdownMenuItem className="flex flex-col items-start gap-1 cursor-pointer">
-							<span className="font-medium">Cliente pendiente</span>
-							<span className="text-xs text-muted-foreground">
-								Juan Pérez está esperando aprobación
-							</span>
-						</DropdownMenuItem>
-						<DropdownMenuSeparator />
-						<DropdownMenuItem className="text-center cursor-pointer">
-							<span className="text-sm text-primary">Ver todas</span>
-						</DropdownMenuItem>
-					</DropdownMenuContent>
-				</DropdownMenu>
-			</div>
-		</header>
-	)
-}

package/templates/components/layout/main-content.tsx

@@ -1,28 +0,0 @@
-'use client'
-
-import { cn } from '@/lib/utils'
-import { useSidebar } from './sidebar-context'
-import { ReactNode } from 'react'
-
-interface MainContentProps {
-	children: ReactNode
-	className?: string
-}
-
-export function MainContent({ children, className }: MainContentProps) {
-	const { isExpanded } = useSidebar()
-
-	return (
-		<main
-			className={cn(
-				'min-h-screen bg-background',
-				'transition-all duration-200 ease-[cubic-bezier(0.4,0,0.2,1)]',
-				isExpanded ? 'md:ml-[240px] md:w-[calc(100%-240px)]' : 'md:ml-[70px] md:w-[calc(100%-70px)]',
-				'w-full',
-				className
-			)}
-		>
-			{children}
-		</main>
-	)
-}

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>
-	)
-}