@create-lft-app/cli 1.0.14 → 1.1.1

package/templates/app/globals.css

@@ -1,249 +0,0 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --radius-2xl: calc(var(--radius) + 8px);
-  --radius-3xl: calc(var(--radius) + 12px);
-  --radius-4xl: calc(var(--radius) + 16px);
-}
-
-/* ========================================
-   MIDDAY DESIGN SYSTEM - Color Palette
-   ======================================== */
-
-:root {
-  --radius: 0.5rem;
-
-  /* Midday Dark Theme - Pure blacks (DEFAULT) */
-  --background: hsl(0 0% 5%);
-  --foreground: hsl(0 0% 98%);
-
-  --card: hsl(0 0% 7%);
-  --card-foreground: hsl(0 0% 98%);
-
-  --popover: hsl(0 0% 4%);
-  --popover-foreground: hsl(0 0% 98%);
-
-  --primary: hsl(0 0% 98%);
-  --primary-foreground: hsl(0 0% 9%);
-
-  --secondary: hsl(0 0% 11%);
-  --secondary-foreground: hsl(0 0% 98%);
-
-  --muted: hsl(0 0% 11%);
-  --muted-foreground: hsl(0 0% 64%);
-
-  --accent: hsl(0 0% 11%);
-  --accent-foreground: hsl(0 0% 98%);
-
-  --destructive: hsl(0 63% 31%);
-  --destructive-foreground: hsl(0 0% 98%);
-
-  --border: hsl(0 0% 11%);
-  --input: hsl(0 0% 15%);
-  --ring: hsl(0 0% 83%);
-
-  /* Chart colors dark */
-  --chart-1: hsl(220 70% 50%);
-  --chart-2: hsl(160 60% 45%);
-  --chart-3: hsl(30 80% 55%);
-  --chart-4: hsl(280 65% 60%);
-  --chart-5: hsl(340 75% 55%);
-
-  /* Sidebar dark */
-  --sidebar: hsl(0 0% 7%);
-  --sidebar-foreground: hsl(0 0% 98%);
-  --sidebar-primary: hsl(0 0% 98%);
-  --sidebar-primary-foreground: hsl(0 0% 9%);
-  --sidebar-accent: hsl(0 0% 11%);
-  --sidebar-accent-foreground: hsl(0 0% 98%);
-  --sidebar-border: hsl(0 0% 11%);
-  --sidebar-ring: hsl(0 0% 83%);
-}
-
-.light {
-  /* Midday Light Theme - Warm beige/neutral palette */
-  --background: hsl(0 0% 100%);
-  --foreground: hsl(0 0% 7%);
-
-  --card: hsl(45 18% 96%);
-  --card-foreground: hsl(0 0% 4%);
-
-  --popover: hsl(0 0% 100%);
-  --popover-foreground: hsl(0 0% 4%);
-
-  --primary: hsl(240 6% 10%);
-  --primary-foreground: hsl(0 0% 98%);
-
-  --secondary: hsl(40 11% 89%);
-  --secondary-foreground: hsl(0 0% 9%);
-
-  --muted: hsl(40 11% 89%);
-  --muted-foreground: hsl(0 0% 38%);
-
-  --accent: hsl(40 10% 94%);
-  --accent-foreground: hsl(0 0% 9%);
-
-  --destructive: hsl(0 84% 60%);
-  --destructive-foreground: hsl(0 0% 98%);
-
-  --border: hsl(45 5% 85%);
-  --input: hsl(0 0% 90%);
-  --ring: hsl(0 0% 4%);
-
-  /* Chart colors */
-  --chart-1: hsl(12 76% 61%);
-  --chart-2: hsl(173 58% 39%);
-  --chart-3: hsl(197 37% 24%);
-  --chart-4: hsl(43 74% 66%);
-  --chart-5: hsl(27 87% 67%);
-
-  /* Sidebar - Midday style */
-  --sidebar: hsl(0 0% 99%);
-  --sidebar-foreground: hsl(0 0% 7%);
-  --sidebar-primary: hsl(240 6% 10%);
-  --sidebar-primary-foreground: hsl(0 0% 98%);
-  --sidebar-accent: hsl(40 10% 97%);
-  --sidebar-accent-foreground: hsl(0 0% 9%);
-  --sidebar-border: hsl(45 5% 85%);
-  --sidebar-ring: hsl(0 0% 4%);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-/* ========================================
-   MIDDAY UTILITIES
-   ======================================== */
-
-/* Scrollbar hide utility */
-.scrollbar-hide {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-.scrollbar-hide::-webkit-scrollbar {
-  display: none;
-}
-
-/* ========================================
-   MIDDAY ANIMATIONS
-   ======================================== */
-
-@keyframes shimmer {
-  0% {
-    transform: translateX(-100%);
-  }
-  100% {
-    transform: translateX(100%);
-  }
-}
-
-@keyframes accordion-down {
-  from {
-    height: 0;
-  }
-  to {
-    height: var(--radix-accordion-content-height);
-  }
-}
-
-@keyframes accordion-up {
-  from {
-    height: var(--radix-accordion-content-height);
-  }
-  to {
-    height: 0;
-  }
-}
-
-@keyframes dialog-overlay-show {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes dialog-content-show {
-  from {
-    opacity: 0;
-    transform: translate(-50%, -50%) scale(0.97);
-  }
-  to {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
-  }
-}
-
-@keyframes caret-blink {
-  0%, 70%, 100% {
-    opacity: 1;
-  }
-  20%, 50% {
-    opacity: 0;
-  }
-}
-
-/* Loading ellipsis animation */
-@keyframes loading-ellipsis {
-  0% { content: ''; }
-  25% { content: '.'; }
-  50% { content: '..'; }
-  75% { content: '...'; }
-}
-
-.loading-ellipsis::after {
-  content: '';
-  animation: loading-ellipsis 1.5s infinite;
-}
-
-/* Animate shimmer class */
-.animate-shimmer {
-  animation: shimmer 2.5s linear infinite;
-}

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" className="dark" suppressHydrationWarning>
-      <body className={`${inter.className} font-sans antialiased`}>
-        <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>
-	)
-}