@create-lft-app/nextjs 1.0.0

package/bin/cli.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/bin/cli.js

@@ -0,0 +1,42 @@
+#!/usr/bin/env node
+import { program } from 'commander';
+import path from 'path';
+import fs from 'fs-extra';
+import { fileURLToPath } from 'url';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+program
+    .name('create-lft-nextjs')
+    .description('Crea un proyecto Next.js con el template LFT')
+    .version('1.0.0')
+    .argument('<project-name>', 'Nombre del proyecto')
+    .option('--cwd <path>', 'Directorio donde crear el proyecto', process.cwd())
+    .action(async (projectName, options) => {
+    const templateDir = path.join(__dirname, '..', 'template');
+    const targetDir = path.join(options.cwd, projectName);
+    // Verificar si el directorio ya existe
+    if (fs.existsSync(targetDir)) {
+        console.log(`El directorio ${projectName} ya existe`);
+        process.exit(1);
+    }
+    try {
+        // Copiar template
+        await fs.copy(templateDir, targetDir);
+        // Actualizar package.json con el nombre del proyecto
+        const pkgPath = path.join(targetDir, 'package.json');
+        const pkg = await fs.readJson(pkgPath);
+        pkg.name = projectName;
+        await fs.writeJson(pkgPath, pkg, { spaces: 2 });
+        // Renombrar gitignore
+        const gitignorePath = path.join(targetDir, 'gitignore');
+        if (fs.existsSync(gitignorePath)) {
+            await fs.rename(gitignorePath, path.join(targetDir, '.gitignore'));
+        }
+        console.log(`Proyecto ${projectName} creado exitosamente`);
+    }
+    catch (error) {
+        console.error('Error al crear el proyecto:', error);
+        process.exit(1);
+    }
+});
+program.parse();

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@create-lft-app/nextjs",
+  "version": "1.0.0",
+  "description": "Next.js template para proyectos LFT con Midday Design System",
+  "type": "module",
+  "bin": {
+    "create-lft-nextjs": "./bin/cli.js"
+  },
+  "files": [
+    "bin",
+    "template"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "nextjs",
+    "template",
+    "lft",
+    "midday",
+    "dashboard"
+  ],
+  "author": "LFT",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Test-Boiler/create-lft-nextjs"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.0",
+    "@types/node": "^20.0.0",
+    "typescript": "^5.0.0"
+  },
+  "dependencies": {
+    "commander": "^12.0.0",
+    "fs-extra": "^11.0.0"
+  }
+}

package/template/eslint.config.mjs

@@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;

package/template/gitignore

@@ -0,0 +1,36 @@
+# Dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# Testing
+/coverage
+
+# Next.js
+/.next/
+/out/
+
+# Production
+/build
+
+# Misc
+.DS_Store
+*.pem
+
+# Debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# Local env files
+.env*.local
+.env
+
+# Vercel
+.vercel
+
+# TypeScript
+*.tsbuildinfo
+next-env.d.ts

package/template/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

package/template/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "lft-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "^16.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-alert-dialog": "^1.1.0",
+    "@radix-ui/react-avatar": "^1.1.0",
+    "@radix-ui/react-checkbox": "^1.1.0",
+    "@radix-ui/react-collapsible": "^1.1.0",
+    "@radix-ui/react-dialog": "^1.1.0",
+    "@radix-ui/react-dropdown-menu": "^2.1.0",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.0",
+    "@radix-ui/react-progress": "^1.1.0",
+    "@radix-ui/react-radio-group": "^1.2.0",
+    "@radix-ui/react-scroll-area": "^1.1.0",
+    "@radix-ui/react-select": "^2.1.0",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slider": "^1.2.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "tailwind-merge": "^2.5.0",
+    "lucide-react": "^0.400.0",
+    "react-hook-form": "^7.50.0",
+    "@hookform/resolvers": "^3.9.0",
+    "cmdk": "^1.0.0",
+    "react-day-picker": "^9.0.0",
+    "date-fns": "^4.0.0",
+    "sonner": "^1.5.0",
+    "next-themes": "^0.4.0",
+    "tw-animate-css": "^1.2.0",
+    "zod": "^3.23.0",
+    "@supabase/supabase-js": "^2.45.0",
+    "@supabase/ssr": "^0.5.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "typescript": "^5.7.0",
+    "eslint": "^9.0.0",
+    "eslint-config-next": "^16.0.0",
+    "tailwindcss": "^4.0.0",
+    "@tailwindcss/postcss": "^4.0.0",
+    "tailwindcss-animate": "^1.0.0"
+  }
+}

package/template/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

package/template/src/app/auth/login/page.tsx

@@ -0,0 +1,153 @@
+"use client"
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import Link from "next/link"
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { Label } from "@/components/ui/label"
+import { Separator } from "@/components/ui/separator"
+import { Spinner } from "@/components/ui/spinner"
+
+export default function LoginPage() {
+  const router = useRouter()
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    setIsLoading(true)
+    setError(null)
+
+    const formData = new FormData(e.currentTarget)
+    const email = formData.get("email") as string
+    const password = formData.get("password") as string
+
+    try {
+      // TODO: Implementar autenticación con Supabase
+      // const { error } = await supabase.auth.signInWithPassword({ email, password })
+
+      // Simulación de login exitoso
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+
+      router.push("/dashboard")
+    } catch (err) {
+      setError("Error al iniciar sesión. Verifica tus credenciales.")
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader className="space-y-1 text-center">
+          <CardTitle className="text-2xl font-bold">Iniciar Sesión</CardTitle>
+          <CardDescription>
+            Ingresa tus credenciales para acceder al panel
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {error && (
+              <div className="p-3 text-sm text-destructive bg-destructive/10 border border-destructive/20 rounded-md">
+                {error}
+              </div>
+            )}
+
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                name="email"
+                type="email"
+                placeholder="tu@email.com"
+                required
+                disabled={isLoading}
+                autoComplete="email"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="password">Contraseña</Label>
+                <Link
+                  href="/auth/forgot-password"
+                  className="text-sm text-primary hover:underline"
+                >
+                  ¿Olvidaste tu contraseña?
+                </Link>
+              </div>
+              <Input
+                id="password"
+                name="password"
+                type="password"
+                placeholder="••••••••"
+                required
+                disabled={isLoading}
+                autoComplete="current-password"
+              />
+            </div>
+
+            <Button type="submit" className="w-full" disabled={isLoading}>
+              {isLoading ? (
+                <>
+                  <Spinner className="mr-2 h-4 w-4" />
+                  Iniciando sesión...
+                </>
+              ) : (
+                "Iniciar Sesión"
+              )}
+            </Button>
+          </form>
+
+          <div className="relative my-6">
+            <Separator />
+            <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-background px-2 text-xs text-muted-foreground">
+              O continuar con
+            </span>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <Button variant="outline" disabled={isLoading}>
+              <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24">
+                <path
+                  fill="currentColor"
+                  d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+                />
+                <path
+                  fill="currentColor"
+                  d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+                />
+                <path
+                  fill="currentColor"
+                  d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+                />
+                <path
+                  fill="currentColor"
+                  d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+                />
+              </svg>
+              Google
+            </Button>
+            <Button variant="outline" disabled={isLoading}>
+              <svg className="mr-2 h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+              </svg>
+              GitHub
+            </Button>
+          </div>
+        </CardContent>
+        <CardFooter className="flex justify-center">
+          <p className="text-sm text-muted-foreground">
+            ¿No tienes una cuenta?{" "}
+            <Link href="/auth/register" className="text-primary hover:underline">
+              Regístrate
+            </Link>
+          </p>
+        </CardFooter>
+      </Card>
+    </div>
+  )
+}

package/template/src/app/dashboard/page.tsx

@@ -0,0 +1,102 @@
+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>
+    </>
+  )
+}