ar-saas 0.1.0

package/templates/frontend/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "create-saas-ar-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "^15.3.3",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "axios": "^1.7.9",
+    "js-cookie": "^3.0.5",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-toast": "^1.2.6",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.6.0",
+    "lucide-react": "^0.477.0",
+    "react-hook-form": "^7.54.2",
+    "@hookform/resolvers": "^3.9.1",
+    "zod": "^3.24.1"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.3",
+    "@types/node": "^22.10.7",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "@types/js-cookie": "^3.0.6",
+    "tailwindcss": "^4.1.0",
+    "@tailwindcss/postcss": "^4.1.0",
+    "eslint": "^9.18.0",
+    "eslint-config-next": "^15.3.3",
+    "@eslint/eslintrc": "^3.2.0"
+  }
+}

package/templates/frontend/postcss.config.mjs

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

package/templates/frontend/src/app/(auth)/forgot-password/page.tsx

@@ -0,0 +1,84 @@
+'use client'
+
+import { useState } from 'react'
+import Link from 'next/link'
+import { useForm } from 'react-hook-form'
+import { authApi } from '@/lib/api/auth'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+
+interface ForgotPasswordForm {
+  email: string
+}
+
+export default function ForgotPasswordPage() {
+  const [sent, setSent] = useState(false)
+
+  const form = useForm<ForgotPasswordForm>({
+    defaultValues: { email: '' },
+  })
+
+  async function onSubmit(data: ForgotPasswordForm) {
+    await authApi.forgotPassword(data.email).catch(() => null)
+    setSent(true)
+  }
+
+  if (sent) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Revisá tu email</CardTitle>
+          <CardDescription>
+            Si el email está registrado, te enviamos un link para restablecer tu contraseña.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Button asChild variant="outline" className="w-full">
+            <Link href="/login">Volver al inicio de sesión</Link>
+          </Button>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Olvidé mi contraseña</CardTitle>
+        <CardDescription>
+          Ingresá tu email y te enviamos el link de restablecimiento.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="email"
+              rules={{ required: 'El email es requerido', pattern: { value: /\S+@\S+\.\S+/, message: 'Email inválido' } }}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  <FormControl>
+                    <Input type="email" placeholder="juan@empresa.com" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Button type="submit" className="w-full" disabled={form.formState.isSubmitting}>
+              {form.formState.isSubmitting ? 'Enviando...' : 'Enviar link de restablecimiento'}
+            </Button>
+          </form>
+        </Form>
+        <p className="mt-4 text-center text-sm text-muted-foreground">
+          <Link href="/login" className="underline underline-offset-4 hover:text-foreground">
+            Volver al inicio de sesión
+          </Link>
+        </p>
+      </CardContent>
+    </Card>
+  )
+}

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

@@ -0,0 +1,28 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+import { useAuth } from '@/lib/hooks/use-auth'
+
+export default function AuthLayout({ children }: { children: React.ReactNode }) {
+  const { isAuthenticated, isLoading } = useAuth()
+  const router = useRouter()
+
+  useEffect(() => {
+    if (!isLoading && isAuthenticated) {
+      router.replace('/dashboard')
+    }
+  }, [isAuthenticated, isLoading, router])
+
+  if (isLoading) return null
+
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center bg-muted/40 px-4">
+      <div className="mb-8 text-center">
+        <h1 className="text-2xl font-bold tracking-tight">create-saas-ar</h1>
+        <p className="text-sm text-muted-foreground mt-1">Tu SaaS listo para Argentina</p>
+      </div>
+      <div className="w-full max-w-md">{children}</div>
+    </div>
+  )
+}

package/templates/frontend/src/app/(auth)/login/page.tsx

@@ -0,0 +1,111 @@
+'use client'
+
+import { useState } from 'react'
+import Link from 'next/link'
+import { Eye, EyeOff } from 'lucide-react'
+import { useForm } from 'react-hook-form'
+import { useAuth } from '@/lib/hooks/use-auth'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+
+interface LoginForm {
+  email: string
+  password: string
+}
+
+export default function LoginPage() {
+  const { login } = useAuth()
+  const [showPassword, setShowPassword] = useState(false)
+  const [apiError, setApiError] = useState('')
+
+  const form = useForm<LoginForm>({
+    defaultValues: { email: '', password: '' },
+  })
+
+  async function onSubmit(data: LoginForm) {
+    setApiError('')
+    try {
+      await login(data.email, data.password)
+    } catch (err: unknown) {
+      const msg = err instanceof Error
+        ? err.message
+        : (err as { message?: string })?.message ?? 'Error al iniciar sesión'
+      setApiError(msg)
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Iniciar sesión</CardTitle>
+        <CardDescription>Ingresá tu email y contraseña</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="email"
+              rules={{ required: 'El email es requerido', pattern: { value: /\S+@\S+\.\S+/, message: 'Email inválido' } }}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  <FormControl>
+                    <Input type="email" placeholder="juan@empresa.com" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="password"
+              rules={{ required: 'La contraseña es requerida' }}
+              render={({ field }) => (
+                <FormItem>
+                  <div className="flex items-center justify-between">
+                    <FormLabel>Contraseña</FormLabel>
+                    <Link href="/forgot-password" className="text-xs text-muted-foreground underline underline-offset-4 hover:text-foreground">
+                      ¿Olvidaste tu contraseña?
+                    </Link>
+                  </div>
+                  <FormControl>
+                    <div className="relative">
+                      <Input
+                        type={showPassword ? 'text' : 'password'}
+                        placeholder="Tu contraseña"
+                        className="pr-10"
+                        {...field}
+                      />
+                      <button
+                        type="button"
+                        onClick={() => setShowPassword((v) => !v)}
+                        className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                        tabIndex={-1}
+                      >
+                        {showPassword ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
+                      </button>
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            {apiError && <p className="text-sm text-destructive">{apiError}</p>}
+            <Button type="submit" className="w-full" disabled={form.formState.isSubmitting}>
+              {form.formState.isSubmitting ? 'Ingresando...' : 'Iniciar sesión'}
+            </Button>
+          </form>
+        </Form>
+        <p className="mt-4 text-center text-sm text-muted-foreground">
+          ¿No tenés cuenta?{' '}
+          <Link href="/register" className="underline underline-offset-4 hover:text-foreground">
+            Registrate
+          </Link>
+        </p>
+      </CardContent>
+    </Card>
+  )
+}

package/templates/frontend/src/app/(auth)/register/page.tsx

@@ -0,0 +1,119 @@
+'use client'
+
+import { useState } from 'react'
+import Link from 'next/link'
+import { useForm } from 'react-hook-form'
+import { useAuth } from '@/lib/hooks/use-auth'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+
+interface RegisterForm {
+  name: string
+  email: string
+  password: string
+}
+
+export default function RegisterPage() {
+  const { register } = useAuth()
+  const [success, setSuccess] = useState(false)
+  const [apiError, setApiError] = useState('')
+
+  const form = useForm<RegisterForm>({
+    defaultValues: { name: '', email: '', password: '' },
+  })
+
+  async function onSubmit(data: RegisterForm) {
+    setApiError('')
+    try {
+      await register(data.name, data.email, data.password)
+      setSuccess(true)
+    } catch (err: unknown) {
+      const msg = err instanceof Error
+        ? err.message
+        : (err as { message?: string })?.message ?? 'Error al crear la cuenta'
+      setApiError(msg)
+    }
+  }
+
+  if (success) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>¡Revisá tu email!</CardTitle>
+          <CardDescription>
+            Te enviamos un link de verificación. Hacé click en el link para activar tu cuenta.
+          </CardDescription>
+        </CardHeader>
+      </Card>
+    )
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Crear cuenta</CardTitle>
+        <CardDescription>Completá tus datos para empezar</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="name"
+              rules={{ required: 'El nombre es requerido', minLength: { value: 2, message: 'Mínimo 2 caracteres' } }}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Nombre completo</FormLabel>
+                  <FormControl>
+                    <Input placeholder="Juan Pérez" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="email"
+              rules={{ required: 'El email es requerido', pattern: { value: /\S+@\S+\.\S+/, message: 'Email inválido' } }}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  <FormControl>
+                    <Input type="email" placeholder="juan@empresa.com" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="password"
+              rules={{ required: 'La contraseña es requerida', minLength: { value: 8, message: 'Mínimo 8 caracteres' } }}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Contraseña</FormLabel>
+                  <FormControl>
+                    <Input type="password" placeholder="Mínimo 8 caracteres" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            {apiError && <p className="text-sm text-destructive">{apiError}</p>}
+            <Button type="submit" className="w-full" disabled={form.formState.isSubmitting}>
+              {form.formState.isSubmitting ? 'Creando cuenta...' : 'Crear cuenta'}
+            </Button>
+          </form>
+        </Form>
+        <p className="mt-4 text-center text-sm text-muted-foreground">
+          ¿Ya tenés cuenta?{' '}
+          <Link href="/login" className="underline underline-offset-4 hover:text-foreground">
+            Iniciá sesión
+          </Link>
+        </p>
+      </CardContent>
+    </Card>
+  )
+}

package/templates/frontend/src/app/(auth)/reset-password/page.tsx

@@ -0,0 +1,120 @@
+'use client'
+
+import { Suspense, useState } from 'react'
+import Link from 'next/link'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { useForm } from 'react-hook-form'
+import { authApi } from '@/lib/api/auth'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+
+interface ResetPasswordForm {
+  newPassword: string
+  confirmPassword: string
+}
+
+function ResetPasswordContent() {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const token = searchParams.get('token')
+  const [apiError, setApiError] = useState('')
+
+  const form = useForm<ResetPasswordForm>({
+    defaultValues: { newPassword: '', confirmPassword: '' },
+  })
+
+  async function onSubmit(data: ResetPasswordForm) {
+    if (!token) {
+      setApiError('Token inválido o faltante.')
+      return
+    }
+    setApiError('')
+    try {
+      await authApi.resetPassword(token, data.newPassword)
+      router.push('/login')
+    } catch (err: unknown) {
+      const msg = (err as { message?: string })?.message ?? 'Error al restablecer la contraseña'
+      setApiError(msg)
+    }
+  }
+
+  if (!token) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Link inválido</CardTitle>
+          <CardDescription>El link de restablecimiento es inválido o expiró.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Button asChild variant="outline" className="w-full">
+            <Link href="/forgot-password">Solicitar nuevo link</Link>
+          </Button>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Nueva contraseña</CardTitle>
+        <CardDescription>Elegí una nueva contraseña para tu cuenta.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="newPassword"
+              rules={{
+                required: 'La contraseña es requerida',
+                minLength: { value: 8, message: 'Mínimo 8 caracteres' },
+              }}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Nueva contraseña</FormLabel>
+                  <FormControl>
+                    <Input type="password" placeholder="Mínimo 8 caracteres" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="confirmPassword"
+              rules={{
+                required: 'Confirmá la contraseña',
+                validate: (val) =>
+                  val === form.getValues('newPassword') || 'Las contraseñas no coinciden',
+              }}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Confirmar contraseña</FormLabel>
+                  <FormControl>
+                    <Input type="password" placeholder="Repetí la contraseña" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            {apiError && <p className="text-sm text-destructive">{apiError}</p>}
+            <Button type="submit" className="w-full" disabled={form.formState.isSubmitting}>
+              {form.formState.isSubmitting ? 'Guardando...' : 'Guardar nueva contraseña'}
+            </Button>
+          </form>
+        </Form>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default function ResetPasswordPage() {
+  return (
+    <Suspense fallback={<Card><CardHeader><CardTitle>Cargando...</CardTitle></CardHeader></Card>}>
+      <ResetPasswordContent />
+    </Suspense>
+  )
+}

package/templates/frontend/src/app/(auth)/verify-email/page.tsx

@@ -0,0 +1,78 @@
+'use client'
+
+import { Suspense, useEffect, useState } from 'react'
+import Link from 'next/link'
+import { useSearchParams } from 'next/navigation'
+import { authApi } from '@/lib/api/auth'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+
+type Status = 'loading' | 'success' | 'error' | 'no-token'
+
+function VerifyEmailContent() {
+  const searchParams = useSearchParams()
+  const token = searchParams.get('token')
+  const [status, setStatus] = useState<Status>(token ? 'loading' : 'no-token')
+  const [error, setError] = useState('')
+
+  useEffect(() => {
+    if (!token) return
+    authApi
+      .verifyEmail(token)
+      .then(() => setStatus('success'))
+      .catch((err: unknown) => {
+        const msg = (err as { message?: string })?.message ?? 'Error al verificar el email'
+        setError(msg)
+        setStatus('error')
+      })
+  }, [token])
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Verificación de email</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {status === 'loading' && (
+          <CardDescription>Verificando tu email...</CardDescription>
+        )}
+        {status === 'success' && (
+          <>
+            <CardDescription>
+              ✓ Email verificado correctamente. Ya podés iniciar sesión.
+            </CardDescription>
+            <Button asChild className="w-full">
+              <Link href="/login">Ir al inicio de sesión</Link>
+            </Button>
+          </>
+        )}
+        {status === 'error' && (
+          <>
+            <CardDescription className="text-destructive">{error}</CardDescription>
+            <Button asChild variant="outline" className="w-full">
+              <Link href="/login">Volver al inicio de sesión</Link>
+            </Button>
+          </>
+        )}
+        {status === 'no-token' && (
+          <>
+            <CardDescription className="text-destructive">
+              Link de verificación inválido o faltante.
+            </CardDescription>
+            <Button asChild variant="outline" className="w-full">
+              <Link href="/login">Volver al inicio de sesión</Link>
+            </Button>
+          </>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+export default function VerifyEmailPage() {
+  return (
+    <Suspense fallback={<Card><CardHeader><CardTitle>Verificando...</CardTitle></CardHeader></Card>}>
+      <VerifyEmailContent />
+    </Suspense>
+  )
+}

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

@@ -0,0 +1,36 @@
+'use client'
+
+import { useAuth } from '@/lib/hooks/use-auth'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Rocket } from 'lucide-react'
+
+export default function DashboardPage() {
+  const { user } = useAuth()
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold">Bienvenido, {user?.name}</h1>
+        <p className="text-muted-foreground">{user?.email}</p>
+      </div>
+      <Card className="max-w-md">
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Rocket className="size-5" />
+            <CardTitle>Tu SaaS está listo para construir</CardTitle>
+          </div>
+          <CardDescription>
+            El backend y el frontend están configurados y funcionando. Agregá tus módulos de negocio.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">
+            Consultá la documentación en{' '}
+            <span className="font-mono text-foreground">.ai-docs/</span> para ver los patrones
+            disponibles.
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}