ar-saas 0.1.0

package/templates/frontend/src/app/(dashboard)/layout.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import { useEffect } from 'react'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import { LayoutDashboard, LogOut } from 'lucide-react'
+import { useAuth } from '@/lib/hooks/use-auth'
+import { Button } from '@/components/ui/button'
+
+export default function DashboardLayout({ children }: { children: React.ReactNode }) {
+  const { user, isAuthenticated, isLoading, logout } = useAuth()
+  const router = useRouter()
+
+  useEffect(() => {
+    if (!isLoading && !isAuthenticated) {
+      router.replace('/login')
+    }
+  }, [isAuthenticated, isLoading, router])
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-muted-foreground text-sm">Cargando...</div>
+      </div>
+    )
+  }
+
+  if (!isAuthenticated) return null
+
+  return (
+    <div className="min-h-screen flex">
+      <aside className="w-60 shrink-0 border-r flex flex-col bg-card">
+        <div className="p-4 border-b">
+          <p className="text-sm font-semibold truncate">{user?.name}</p>
+          <p className="text-xs text-muted-foreground truncate">{user?.email}</p>
+        </div>
+        <nav className="flex-1 p-3 space-y-1">
+          <Button asChild variant="ghost" className="w-full justify-start">
+            <Link href="/dashboard">
+              <LayoutDashboard className="mr-2 size-4" />
+              Dashboard
+            </Link>
+          </Button>
+        </nav>
+        <div className="p-3 border-t">
+          <Button
+            variant="ghost"
+            className="w-full justify-start text-muted-foreground hover:text-foreground"
+            onClick={logout}
+          >
+            <LogOut className="mr-2 size-4" />
+            Cerrar sesión
+          </Button>
+        </div>
+      </aside>
+      <main className="flex-1 p-8 overflow-auto">{children}</main>
+    </div>
+  )
+}

package/templates/frontend/src/app/globals.css

@@ -0,0 +1,81 @@
+@import "tailwindcss";
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --radius: 0.625rem;
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+}
+
+* {
+  border-color: var(--border);
+}
+
+body {
+  background-color: var(--background);
+  color: var(--foreground);
+}

package/templates/frontend/src/app/layout.tsx

@@ -0,0 +1,26 @@
+import type { Metadata } from 'next'
+import { Geist, Geist_Mono } from 'next/font/google'
+import './globals.css'
+import { AuthProvider } from '@/providers/auth-provider'
+import { Toaster } from '@/components/ui/toaster'
+
+const geistSans = Geist({ variable: '--font-geist-sans', subsets: ['latin'] })
+const geistMono = Geist_Mono({ variable: '--font-geist-mono', subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: 'create-saas-ar',
+  description: 'Tu SaaS listo para Argentina',
+}
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="es">
+      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
+        <AuthProvider>
+          {children}
+          <Toaster />
+        </AuthProvider>
+      </body>
+    </html>
+  )
+}

package/templates/frontend/src/app/page.tsx

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

package/templates/frontend/src/app/setup/page.tsx

@@ -0,0 +1,278 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
+
+const BACKEND_REQUIRED = [
+  {
+    key: 'MONGODB_URI',
+    example: 'mongodb://localhost:27017/mi-saas',
+    desc: 'URI de conexión a MongoDB. Para desarrollo local instalar MongoDB o usar Atlas.',
+  },
+  {
+    key: 'JWT_ACCESS_SECRET',
+    example: '$(openssl rand -hex 64)',
+    desc: 'Secreto para firmar access tokens. Generar con OpenSSL.',
+  },
+  {
+    key: 'JWT_REFRESH_SECRET',
+    example: '$(openssl rand -hex 64)',
+    desc: 'Secreto para firmar refresh tokens. Usar un valor distinto al anterior.',
+  },
+  {
+    key: 'RESEND_API_KEY',
+    example: 're_xxxxxxxxxxxxxxxx',
+    desc: 'API Key de Resend para enviar emails. Crear cuenta en resend.com.',
+  },
+  {
+    key: 'RESEND_FROM_EMAIL',
+    example: 'noreply@tudominio.com',
+    desc: 'Email remitente. Debe estar verificado en tu cuenta de Resend.',
+  },
+  {
+    key: 'APP_URL',
+    example: 'http://localhost:3001',
+    desc: 'URL del frontend. Se usa en los links de los emails de verificación y reset.',
+  },
+  {
+    key: 'CORS_ORIGINS',
+    example: 'http://localhost:3001',
+    desc: 'URL del frontend separada por coma. Debe coincidir con APP_URL.',
+  },
+]
+
+const BACKEND_OPTIONAL = [
+  { key: 'PORT', example: '3000', desc: 'Puerto del servidor (default: 3000).' },
+  { key: 'JWT_ACCESS_EXPIRES_IN', example: '15m', desc: 'Duración del access token (default: 15m).' },
+  { key: 'JWT_REFRESH_EXPIRES_IN', example: '7d', desc: 'Duración del refresh token (default: 7d).' },
+  { key: 'RESEND_FROM_NAME', example: '"Mi SaaS"', desc: 'Nombre del remitente que ven los destinatarios.' },
+  { key: 'COOKIE_SECRET', example: '$(openssl rand -hex 32)', desc: 'Secreto para firmar cookies.' },
+]
+
+const FRONTEND_REQUIRED = [
+  {
+    key: 'NEXT_PUBLIC_API_URL',
+    example: 'http://localhost:3000',
+    desc: 'URL base del backend. Debe coincidir con el PORT del backend.',
+  },
+]
+
+function EnvVar({ varKey, example, desc }: { varKey: string; example: string; desc: string }) {
+  const [copied, setCopied] = useState(false)
+
+  const copy = () => {
+    navigator.clipboard.writeText(`${varKey}=${example}`)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 1500)
+  }
+
+  return (
+    <div className="py-3 border-b border-zinc-100 last:border-0">
+      <div className="flex items-start justify-between gap-4">
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 mb-0.5">
+            <code className="text-sm font-mono font-semibold text-zinc-900">{varKey}</code>
+          </div>
+          <p className="text-xs text-zinc-500 leading-relaxed">{desc}</p>
+          <code className="text-xs text-zinc-400 font-mono">{example}</code>
+        </div>
+        <button
+          onClick={copy}
+          className="shrink-0 text-xs text-zinc-400 hover:text-zinc-700 transition-colors px-2 py-1 rounded border border-zinc-200 hover:border-zinc-300"
+        >
+          {copied ? '✓' : 'copiar'}
+        </button>
+      </div>
+    </div>
+  )
+}
+
+function CodeBlock({ children }: { children: string }) {
+  const [copied, setCopied] = useState(false)
+
+  const copy = () => {
+    navigator.clipboard.writeText(children)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 1500)
+  }
+
+  return (
+    <div className="relative group">
+      <pre className="bg-zinc-950 text-zinc-100 rounded-lg px-4 py-3 text-sm font-mono overflow-x-auto">
+        {children}
+      </pre>
+      <button
+        onClick={copy}
+        className="absolute top-2 right-2 text-xs text-zinc-500 hover:text-zinc-300 transition-colors bg-zinc-800 px-2 py-0.5 rounded"
+      >
+        {copied ? '✓' : 'copiar'}
+      </button>
+    </div>
+  )
+}
+
+export default function SetupPage() {
+  const router = useRouter()
+  const [dismissed, setDismissed] = useState(false)
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+    if (localStorage.getItem('setup_dismissed') === 'true') {
+      router.replace('/login')
+    }
+  }, [router])
+
+  const handleDone = () => {
+    localStorage.setItem('setup_dismissed', 'true')
+    setDismissed(true)
+    router.push('/login')
+  }
+
+  if (!mounted || dismissed) return null
+
+  return (
+    <div className="min-h-screen bg-zinc-50">
+      <div className="max-w-3xl mx-auto px-4 py-12">
+
+        {/* Header */}
+        <div className="mb-10">
+          <div className="inline-flex items-center gap-2 bg-zinc-900 text-white text-xs font-mono px-3 py-1.5 rounded-full mb-4">
+            <span className="w-1.5 h-1.5 bg-green-400 rounded-full animate-pulse" />
+            create-saas-ar
+          </div>
+          <h1 className="text-3xl font-bold text-zinc-900 mb-2">
+            Tu proyecto está listo
+          </h1>
+          <p className="text-zinc-500 text-lg">
+            Completá la configuración antes de empezar a desarrollar.
+            Son 5 minutos y después tenés todo andando.
+          </p>
+        </div>
+
+        {/* Backend */}
+        <section className="mb-8">
+          <div className="flex items-center gap-3 mb-4">
+            <div className="w-7 h-7 rounded-full bg-zinc-900 text-white text-xs font-bold flex items-center justify-center">1</div>
+            <h2 className="text-lg font-semibold text-zinc-900">Backend — configurar <code className="text-sm bg-zinc-100 px-1.5 py-0.5 rounded">.env</code></h2>
+          </div>
+
+          <div className="bg-white border border-zinc-200 rounded-xl overflow-hidden mb-4">
+            <div className="px-4 py-2.5 bg-zinc-50 border-b border-zinc-100">
+              <span className="text-xs font-semibold text-zinc-500 uppercase tracking-wider">Variables requeridas</span>
+            </div>
+            <div className="px-4">
+              {BACKEND_REQUIRED.map((v) => (
+                <EnvVar key={v.key} varKey={v.key} example={v.example} desc={v.desc} />
+              ))}
+            </div>
+          </div>
+
+          <details className="bg-white border border-zinc-200 rounded-xl overflow-hidden mb-4">
+            <summary className="px-4 py-2.5 bg-zinc-50 border-b border-zinc-100 cursor-pointer text-xs font-semibold text-zinc-500 uppercase tracking-wider hover:text-zinc-700">
+              Variables opcionales
+            </summary>
+            <div className="px-4">
+              {BACKEND_OPTIONAL.map((v) => (
+                <EnvVar key={v.key} varKey={v.key} example={v.example} desc={v.desc} />
+              ))}
+            </div>
+          </details>
+
+          <div className="bg-white border border-zinc-200 rounded-xl overflow-hidden">
+            <div className="px-4 py-2.5 bg-zinc-50 border-b border-zinc-100">
+              <span className="text-xs font-semibold text-zinc-500 uppercase tracking-wider">Iniciar el backend</span>
+            </div>
+            <div className="p-4 space-y-3">
+              <CodeBlock>{`cd backend
+cp .env.example .env
+# Completar las variables en .env
+npm install
+npm run start:dev`}</CodeBlock>
+              <p className="text-xs text-zinc-400">
+                El servidor levanta en <code className="bg-zinc-100 px-1 py-0.5 rounded">http://localhost:3000</code>.
+                Swagger en <code className="bg-zinc-100 px-1 py-0.5 rounded">http://localhost:3000/api/docs</code>.
+              </p>
+            </div>
+          </div>
+        </section>
+
+        {/* Frontend */}
+        <section className="mb-8">
+          <div className="flex items-center gap-3 mb-4">
+            <div className="w-7 h-7 rounded-full bg-zinc-900 text-white text-xs font-bold flex items-center justify-center">2</div>
+            <h2 className="text-lg font-semibold text-zinc-900">Frontend — configurar <code className="text-sm bg-zinc-100 px-1.5 py-0.5 rounded">.env.local</code></h2>
+          </div>
+
+          <div className="bg-white border border-zinc-200 rounded-xl overflow-hidden mb-4">
+            <div className="px-4 py-2.5 bg-zinc-50 border-b border-zinc-100">
+              <span className="text-xs font-semibold text-zinc-500 uppercase tracking-wider">Variables requeridas</span>
+            </div>
+            <div className="px-4">
+              {FRONTEND_REQUIRED.map((v) => (
+                <EnvVar key={v.key} varKey={v.key} example={v.example} desc={v.desc} />
+              ))}
+            </div>
+          </div>
+
+          <div className="bg-white border border-zinc-200 rounded-xl overflow-hidden">
+            <div className="px-4 py-2.5 bg-zinc-50 border-b border-zinc-100">
+              <span className="text-xs font-semibold text-zinc-500 uppercase tracking-wider">Iniciar el frontend</span>
+            </div>
+            <div className="p-4 space-y-3">
+              <CodeBlock>{`cd frontend
+cp .env.local.example .env.local
+# Ajustar NEXT_PUBLIC_API_URL si cambiaste el PORT del backend
+npm install
+npm run dev`}</CodeBlock>
+              <p className="text-xs text-zinc-400">
+                El frontend levanta en <code className="bg-zinc-100 px-1 py-0.5 rounded">http://localhost:3001</code> (o el puerto que indique Next.js).
+              </p>
+            </div>
+          </div>
+        </section>
+
+        {/* Verificación */}
+        <section className="mb-10">
+          <div className="flex items-center gap-3 mb-4">
+            <div className="w-7 h-7 rounded-full bg-zinc-900 text-white text-xs font-bold flex items-center justify-center">3</div>
+            <h2 className="text-lg font-semibold text-zinc-900">Verificar que todo funciona</h2>
+          </div>
+
+          <div className="bg-white border border-zinc-200 rounded-xl p-4 space-y-2">
+            {[
+              { label: 'Backend corre sin errores', hint: 'npm run start:dev no muestra errores rojos' },
+              { label: 'Swagger disponible', hint: 'http://localhost:3000/api/docs carga correctamente' },
+              { label: 'MongoDB conectado', hint: 'El log dice "Connected to MongoDB"' },
+              { label: 'Registro funciona', hint: 'POST /api/auth/register crea un usuario' },
+              { label: 'Email de verificación llega', hint: 'Revisar spam si no aparece en inbox' },
+            ].map((item) => (
+              <div key={item.label} className="flex items-start gap-3 py-1.5">
+                <div className="w-4 h-4 rounded border-2 border-zinc-300 mt-0.5 shrink-0" />
+                <div>
+                  <p className="text-sm text-zinc-800 font-medium">{item.label}</p>
+                  <p className="text-xs text-zinc-400">{item.hint}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* CTA */}
+        <div className="flex items-center justify-between">
+          <p className="text-xs text-zinc-400">
+            Esta pantalla no vuelve a aparecer. Podés volver desde{' '}
+            <code className="bg-zinc-100 px-1 py-0.5 rounded">/setup</code>.
+          </p>
+          <button
+            onClick={handleDone}
+            className="bg-zinc-900 hover:bg-zinc-700 text-white font-medium text-sm px-6 py-2.5 rounded-lg transition-colors"
+          >
+            Todo listo, ir al login →
+          </button>
+        </div>
+
+      </div>
+    </div>
+  )
+}

package/templates/frontend/src/components/ui/button.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4 shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-9 w-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button'
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)
+Button.displayName = 'Button'
+
+export { Button, buttonVariants }

package/templates/frontend/src/components/ui/card.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('rounded-xl border bg-card text-card-foreground shadow', className)}
+      {...props}
+    />
+  ),
+)
+Card.displayName = 'Card'
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+  ),
+)
+CardHeader.displayName = 'CardHeader'
+
+const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('font-semibold leading-none tracking-tight', className)} {...props} />
+  ),
+)
+CardTitle.displayName = 'CardTitle'
+
+const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+  ),
+)
+CardDescription.displayName = 'CardDescription'
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+  ),
+)
+CardContent.displayName = 'CardContent'
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+  ),
+)
+CardFooter.displayName = 'CardFooter'
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }