@create-lft-app/cli 1.0.0

package/templates/components/dashboard/widget.tsx

@@ -0,0 +1,113 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import Link from 'next/link'
+
+interface WidgetProps {
+	title: string
+	icon: React.ReactNode
+	description?: string
+	value: string | number
+	subValue?: string
+	href?: string
+	trend?: {
+		value: number
+		positive?: boolean
+	}
+	variant?: 'default' | 'warning' | 'danger' | 'success'
+	children?: React.ReactNode
+}
+
+export function Widget({
+	title,
+	icon,
+	description,
+	value,
+	subValue,
+	href,
+	trend,
+	variant = 'default',
+	children,
+}: WidgetProps) {
+	const content = (
+		<div
+			className={cn(
+				'bg-background border border-border p-4 h-[180px] flex flex-col justify-between transition-all duration-200',
+				href && 'cursor-pointer hover:bg-accent/50 hover:border-border/80',
+			)}
+		>
+			<div>
+				<div className="flex items-center gap-2 mb-3">
+					<span className="text-[#606060]">{icon}</span>
+					<h3 className="text-xs text-[#606060] font-medium uppercase tracking-wide">{title}</h3>
+				</div>
+
+				{description && (
+					<p className="text-sm text-[#878787]">{description}</p>
+				)}
+			</div>
+
+			<div>
+				{children ? (
+					children
+				) : (
+					<div className="flex flex-col gap-1">
+						<div className="flex items-baseline gap-2">
+							<span
+								className={cn(
+									'text-3xl font-medium tabular-nums',
+									variant === 'danger' && 'text-destructive',
+									variant === 'warning' && 'text-yellow-500',
+									variant === 'success' && 'text-green-500',
+								)}
+							>
+								{value}
+							</span>
+							{trend && (
+								<span
+									className={cn(
+										'text-xs',
+										trend.positive ? 'text-green-500' : 'text-destructive'
+									)}
+								>
+									{trend.positive ? '+' : ''}{trend.value}%
+								</span>
+							)}
+						</div>
+						{subValue && (
+							<span className="text-xs text-[#878787]">{subValue}</span>
+						)}
+					</div>
+				)}
+
+				{href && (
+					<span className="text-xs text-[#878787] group-hover:text-foreground transition-colors mt-2 block">
+						Ver más →
+					</span>
+				)}
+			</div>
+		</div>
+	)
+
+	if (href) {
+		return (
+			<Link href={href} className="group">
+				{content}
+			</Link>
+		)
+	}
+
+	return content
+}
+
+interface WidgetGridProps {
+	children: React.ReactNode
+}
+
+export function WidgetGrid({ children }: WidgetGridProps) {
+	return (
+		<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+			{children}
+		</div>
+	)
+}

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

@@ -0,0 +1,247 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { useState, useRef, useEffect } from 'react'
+import { cn } from '@/lib/utils'
+import {
+	LayoutDashboard,
+	Building2,
+	Users,
+	CreditCard,
+	Settings,
+	Shield,
+	Clock,
+	ChevronLeft,
+	LogOut,
+} from 'lucide-react'
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { logout } from '@/modules/auth/actions/auth-actions'
+
+type NavItem = {
+	path: string
+	name: string
+	icon: React.ComponentType<{ className?: string }>
+}
+
+const adminNavItems: NavItem[] = [
+	{ path: '/admin', name: 'Dashboard', icon: LayoutDashboard },
+	{ path: '/admin/organizations', name: 'Organizaciones', icon: Building2 },
+	{ path: '/admin/users', name: 'Usuarios', icon: Users },
+	{ path: '/admin/subscriptions', name: 'Suscripciones', icon: CreditCard },
+]
+
+const systemNavItems: NavItem[] = [
+	{ path: '/admin/jobs', name: 'Jobs', icon: Clock },
+	{ path: '/admin/settings', name: 'Configuración', icon: Settings },
+]
+
+interface AdminMiddaySidebarProps {
+	user: {
+		email: string
+		full_name: string | null
+		role: string
+	} | null
+}
+
+export function AdminMiddaySidebar({ user }: AdminMiddaySidebarProps) {
+	const pathname = usePathname()
+	const [isExpanded, setIsExpanded] = useState(false)
+	const sidebarRef = useRef<HTMLElement>(null)
+	const timeoutRef = useRef<NodeJS.Timeout | null>(null)
+
+	const handleMouseEnter = () => {
+		if (timeoutRef.current) clearTimeout(timeoutRef.current)
+		setIsExpanded(true)
+	}
+
+	const handleMouseLeave = () => {
+		timeoutRef.current = setTimeout(() => setIsExpanded(false), 100)
+	}
+
+	useEffect(() => {
+		return () => {
+			if (timeoutRef.current) clearTimeout(timeoutRef.current)
+		}
+	}, [])
+
+	const isActive = (path: string) => {
+		if (path === '/admin') return pathname === '/admin'
+		return pathname.startsWith(path)
+	}
+
+	const initials = user?.full_name
+		?.split(' ')
+		.map((n) => n[0])
+		.join('')
+		.toUpperCase()
+		.slice(0, 2) || 'SA'
+
+	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}
+		>
+				{/* Logo */}
+				<div className="h-[70px] flex items-center border-b border-border px-4">
+					<Link href="/admin" className="flex items-center gap-3">
+						<div className="flex h-8 w-8 items-center justify-center rounded-md bg-red-500 text-white flex-shrink-0">
+							<Shield className="h-4 w-4" />
+						</div>
+						<span
+							className={cn(
+								'font-semibold text-sm whitespace-nowrap transition-opacity duration-200',
+								isExpanded ? 'opacity-100' : 'opacity-0 w-0'
+							)}
+						>
+							Super Admin
+						</span>
+					</Link>
+				</div>
+
+				{/* Navigation */}
+				<nav className="flex-1 overflow-y-auto py-4">
+					{/* Main Nav */}
+					<div className="mb-6">
+						{isExpanded && (
+							<p className="px-4 mb-2 text-[10px] font-medium text-[#878787] uppercase tracking-wider">
+								Gestión
+							</p>
+						)}
+						<ul className="space-y-1 px-2">
+							{adminNavItems.map((item) => {
+								const Icon = item.icon
+								const active = isActive(item.path)
+
+								return (
+									<li key={item.path}>
+										<Link
+											href={item.path}
+											className={cn(
+												'flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors',
+												active
+													? 'bg-accent text-foreground'
+													: 'text-[#878787] hover:bg-accent/50 hover:text-foreground'
+											)}
+										>
+											<Icon className="h-4 w-4 flex-shrink-0" />
+											{isExpanded && (
+												<span className="whitespace-nowrap">
+													{item.name}
+												</span>
+											)}
+										</Link>
+									</li>
+								)
+							})}
+						</ul>
+					</div>
+
+					{/* System Nav */}
+					<div>
+						{isExpanded && (
+							<p className="px-4 mb-2 text-[10px] font-medium text-[#878787] uppercase tracking-wider">
+								Sistema
+							</p>
+						)}
+						<ul className="space-y-1 px-2">
+							{systemNavItems.map((item) => {
+								const Icon = item.icon
+								const active = isActive(item.path)
+
+								return (
+									<li key={item.path}>
+										<Link
+											href={item.path}
+											className={cn(
+												'flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors',
+												active
+													? 'bg-accent text-foreground'
+													: 'text-[#878787] hover:bg-accent/50 hover:text-foreground'
+											)}
+										>
+											<Icon className="h-4 w-4 flex-shrink-0" />
+											{isExpanded && (
+												<span className="whitespace-nowrap">
+													{item.name}
+												</span>
+											)}
+										</Link>
+									</li>
+								)
+							})}
+						</ul>
+					</div>
+				</nav>
+
+				{/* Back to Dashboard & User */}
+				<div className="border-t border-border">
+					{/* Back Link */}
+					<Link
+						href="/"
+						className="flex items-center gap-3 px-4 py-3 text-sm text-[#878787] hover:text-foreground hover:bg-accent/50 transition-colors"
+					>
+						<ChevronLeft className="h-4 w-4 flex-shrink-0" />
+						<span
+							className={cn(
+								'whitespace-nowrap transition-opacity duration-200',
+								isExpanded ? 'opacity-100' : 'opacity-0 w-0'
+							)}
+						>
+							Volver al Dashboard
+						</span>
+					</Link>
+
+					{/* User Menu */}
+					<DropdownMenu>
+						<DropdownMenuTrigger asChild>
+							<button className="flex items-center gap-3 w-full px-4 py-3 hover:bg-accent/50 transition-colors">
+								<div className="flex h-8 w-8 items-center justify-center rounded-full bg-red-500/10 text-red-500 text-xs font-medium flex-shrink-0">
+									{initials}
+								</div>
+								<div
+									className={cn(
+										'flex flex-col items-start text-left transition-opacity duration-200',
+										isExpanded ? 'opacity-100' : 'opacity-0 w-0'
+									)}
+								>
+									<span className="text-sm font-medium truncate max-w-[160px]">
+										{user?.full_name || 'Super Admin'}
+									</span>
+									<span className="text-xs text-[#878787] truncate max-w-[160px]">
+										{user?.email}
+									</span>
+								</div>
+							</button>
+						</DropdownMenuTrigger>
+						<DropdownMenuContent align="end" className="w-56">
+							<div className="px-2 py-1.5">
+								<p className="text-sm font-medium">{user?.full_name}</p>
+								<p className="text-xs text-[#878787]">{user?.email}</p>
+							</div>
+							<DropdownMenuSeparator />
+							<DropdownMenuItem asChild>
+								<button onClick={() => logout()} className="w-full cursor-pointer">
+									<LogOut className="h-4 w-4 mr-2" />
+									Cerrar sesión
+								</button>
+							</DropdownMenuItem>
+						</DropdownMenuContent>
+					</DropdownMenu>
+				</div>
+		</aside>
+	)
+}

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

@@ -0,0 +1,146 @@
+'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

@@ -0,0 +1,71 @@
+'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/impersonation-banner.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import { Shield, X } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { stopImpersonation } from '@/app/(admin)/admin/organizations/impersonation-actions'
+
+interface ImpersonationBannerProps {
+	organization: {
+		id: string
+		name: string
+		slug: string
+	}
+}
+
+export function ImpersonationBanner({ organization }: ImpersonationBannerProps) {
+	return (
+		<div className="bg-[#1a1a1a] border-b border-[#2a2a2a] text-[#878787] px-4 py-1.5 flex items-center justify-between md:pl-[86px]">
+			<div className="flex items-center gap-2">
+				<Shield className="h-3.5 w-3.5 text-yellow-500" />
+				<span className="text-xs">
+					Viendo como: <strong className="text-foreground">{organization.name}</strong>
+				</span>
+				<span className="text-xs opacity-60">({organization.slug})</span>
+			</div>
+			<Button
+				variant="ghost"
+				size="sm"
+				onClick={() => stopImpersonation()}
+				className="h-6 px-2 text-xs text-[#878787] hover:text-foreground hover:bg-[#2a2a2a]"
+			>
+				<X className="h-3.5 w-3.5 mr-1" />
+				Salir
+			</Button>
+		</div>
+	)
+}

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

@@ -0,0 +1,28 @@
+'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>
+	)
+}