@create-lft-app/cli 1.0.13 → 1.1.0

package/templates/app/dashboard/page.tsx

@@ -1,102 +0,0 @@
-import { Header } from "@/components/layout/header"
-import { Widget, WidgetGrid } from "@/components/dashboard/widget"
-import {
-  Users,
-  DollarSign,
-  Activity,
-  TrendingUp,
-  Building2,
-  FileText,
-  AlertCircle,
-  CheckCircle,
-} from "lucide-react"
-
-export default function DashboardPage() {
-  return (
-    <>
-      <Header title="Dashboard" />
-      <main className="flex-1 p-6">
-        <div className="space-y-6">
-          <div>
-            <h2 className="text-2xl font-bold tracking-tight">
-              Bienvenido de vuelta
-            </h2>
-            <p className="text-muted-foreground">
-              Aquí está el resumen de tu actividad
-            </p>
-          </div>
-
-          <WidgetGrid>
-            <Widget
-              title="Usuarios Activos"
-              icon={<Users className="h-4 w-4" />}
-              value="1,234"
-              subValue="usuarios registrados"
-              trend={{ value: 12.5, positive: true }}
-              href="/admin/users"
-            />
-            <Widget
-              title="Ingresos"
-              icon={<DollarSign className="h-4 w-4" />}
-              value="$45,231"
-              subValue="este mes"
-              trend={{ value: 8.2, positive: true }}
-              variant="success"
-            />
-            <Widget
-              title="Organizaciones"
-              icon={<Building2 className="h-4 w-4" />}
-              value="89"
-              subValue="organizaciones activas"
-              trend={{ value: 3.1, positive: true }}
-              href="/admin/organizations"
-            />
-            <Widget
-              title="Actividad"
-              icon={<Activity className="h-4 w-4" />}
-              value="2,345"
-              subValue="eventos hoy"
-              trend={{ value: 5.4, positive: true }}
-            />
-          </WidgetGrid>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <WidgetGrid>
-              <Widget
-                title="Documentos Pendientes"
-                icon={<FileText className="h-4 w-4" />}
-                value="23"
-                subValue="requieren revisión"
-                variant="warning"
-              />
-              <Widget
-                title="Alertas"
-                icon={<AlertCircle className="h-4 w-4" />}
-                value="5"
-                subValue="alertas activas"
-                variant="danger"
-              />
-            </WidgetGrid>
-
-            <WidgetGrid>
-              <Widget
-                title="Tareas Completadas"
-                icon={<CheckCircle className="h-4 w-4" />}
-                value="156"
-                subValue="esta semana"
-                variant="success"
-              />
-              <Widget
-                title="Crecimiento"
-                icon={<TrendingUp className="h-4 w-4" />}
-                value="+24%"
-                subValue="vs mes anterior"
-                trend={{ value: 24, positive: true }}
-              />
-            </WidgetGrid>
-          </div>
-        </div>
-      </main>
-    </>
-  )
-}

package/templates/app/globals.css

@@ -1,68 +0,0 @@
-/* LFT Custom Styles */
-
-/* Sidebar custom colors */
-:root {
-  --sidebar-background: 0 0% 98%;
-  --sidebar-foreground: 240 5.3% 26.1%;
-  --sidebar-primary: 240 5.9% 10%;
-  --sidebar-primary-foreground: 0 0% 98%;
-  --sidebar-accent: 240 4.8% 95.9%;
-  --sidebar-accent-foreground: 240 5.9% 10%;
-  --sidebar-border: 220 13% 91%;
-  --sidebar-ring: 217.2 91.2% 59.8%;
-}
-
-.dark {
-  --sidebar-background: 240 5.9% 10%;
-  --sidebar-foreground: 240 4.8% 95.9%;
-  --sidebar-primary: 0 0% 98%;
-  --sidebar-primary-foreground: 240 5.9% 10%;
-  --sidebar-accent: 240 3.7% 15.9%;
-  --sidebar-accent-foreground: 240 4.8% 95.9%;
-  --sidebar-border: 240 3.7% 15.9%;
-  --sidebar-ring: 217.2 91.2% 59.8%;
-}
-
-/* Scrollbar styling */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background: hsl(var(--muted-foreground) / 0.3);
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: hsl(var(--muted-foreground) / 0.5);
-}
-
-/* Focus visible improvements */
-*:focus-visible {
-  outline: 2px solid hsl(var(--ring));
-  outline-offset: 2px;
-}
-
-/* Smooth transitions */
-* {
-  transition-property: background-color, border-color, color, fill, stroke;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-/* Widget animations */
-.widget-enter {
-  opacity: 0;
-  transform: translateY(10px);
-}
-
-.widget-enter-active {
-  opacity: 1;
-  transform: translateY(0);
-  transition: opacity 300ms, transform 300ms;
-}

package/templates/app/layout.tsx

@@ -1,40 +0,0 @@
-import type { Metadata } from "next"
-import { Inter } from "next/font/google"
-import "./globals.css"
-import { SidebarProvider, SidebarInset } from "@/components/ui/sidebar"
-import { AdminSidebar } from "@/components/layout/admin-sidebar"
-import { Toaster } from "@/components/ui/sonner"
-
-const inter = Inter({ subsets: ["latin"] })
-
-export const metadata: Metadata = {
-  title: "Dashboard - LFT App",
-  description: "Panel de administración creado con create-lft-app",
-}
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  // Usuario de ejemplo - en producción esto vendría de Supabase Auth
-  const user = {
-    email: "admin@ejemplo.com",
-    full_name: "Admin Usuario",
-    role: "Super Admin",
-  }
-
-  return (
-    <html lang="es" suppressHydrationWarning>
-      <body className={inter.className}>
-        <SidebarProvider>
-          <AdminSidebar user={user} />
-          <SidebarInset>
-            {children}
-          </SidebarInset>
-        </SidebarProvider>
-        <Toaster />
-      </body>
-    </html>
-  )
-}

package/templates/app/page.tsx

@@ -1,5 +0,0 @@
-import { redirect } from "next/navigation"
-
-export default function Home() {
-  redirect("/dashboard")
-}

package/templates/components/dashboard/widget.tsx

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

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