ar-saas 0.2.1 → 0.3.0

package/templates/frontend/pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+allowBuilds:
+  sharp: set this to true or false
+  unrs-resolver: set this to true or false

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

@@ -6,6 +6,7 @@ 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 { Checkbox } from '@/components/ui/checkbox'
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
 
@@ -13,6 +14,7 @@ interface RegisterForm {
   name: string
   email: string
   password: string
+  terms: boolean
 }
 
 export default function RegisterPage() {
@@ -21,7 +23,7 @@ export default function RegisterPage() {
   const [apiError, setApiError] = useState('')
 
   const form = useForm<RegisterForm>({
-    defaultValues: { name: '', email: '', password: '' },
+    defaultValues: { name: '', email: '', password: '', terms: false },
   })
 
   async function onSubmit(data: RegisterForm) {
@@ -30,9 +32,10 @@ export default function RegisterPage() {
       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'
+      const msg =
+        err instanceof Error
+          ? err.message
+          : (err as { message?: string })?.message ?? 'Error al crear la cuenta'
       setApiError(msg)
     }
   }
@@ -62,7 +65,10 @@ export default function RegisterPage() {
             <FormField
               control={form.control}
               name="name"
-              rules={{ required: 'El nombre es requerido', minLength: { value: 2, message: 'Mínimo 2 caracteres' } }}
+              rules={{
+                required: 'El nombre es requerido',
+                minLength: { value: 2, message: 'Mínimo 2 caracteres' },
+              }}
               render={({ field }) => (
                 <FormItem>
                   <FormLabel>Nombre completo</FormLabel>
@@ -76,7 +82,10 @@ export default function RegisterPage() {
             <FormField
               control={form.control}
               name="email"
-              rules={{ required: 'El email es requerido', pattern: { value: /\S+@\S+\.\S+/, message: 'Email inválido' } }}
+              rules={{
+                required: 'El email es requerido',
+                pattern: { value: /\S+@\S+\.\S+/, message: 'Email inválido' },
+              }}
               render={({ field }) => (
                 <FormItem>
                   <FormLabel>Email</FormLabel>
@@ -90,7 +99,10 @@ export default function RegisterPage() {
             <FormField
               control={form.control}
               name="password"
-              rules={{ required: 'La contraseña es requerida', minLength: { value: 8, message: 'Mínimo 8 caracteres' } }}
+              rules={{
+                required: 'La contraseña es requerida',
+                minLength: { value: 8, message: 'Mínimo 8 caracteres' },
+              }}
               render={({ field }) => (
                 <FormItem>
                   <FormLabel>Contraseña</FormLabel>
@@ -101,6 +113,36 @@ export default function RegisterPage() {
                 </FormItem>
               )}
             />
+
+            <FormField
+              control={form.control}
+              name="terms"
+              rules={{ validate: (v) => v || 'Debés aceptar los términos para continuar' }}
+              render={({ field }) => (
+                <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                  <FormControl>
+                    <Checkbox
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
+                  </FormControl>
+                  <div className="space-y-1 leading-none">
+                    <FormLabel className="text-sm font-normal">
+                      Acepto los{' '}
+                      <Link href="/terms" target="_blank" className="underline underline-offset-4 hover:text-foreground">
+                        Términos y Condiciones
+                      </Link>{' '}
+                      y la{' '}
+                      <Link href="/privacy" target="_blank" className="underline underline-offset-4 hover:text-foreground">
+                        Política de Privacidad
+                      </Link>
+                    </FormLabel>
+                    <FormMessage />
+                  </div>
+                </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'}

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

@@ -0,0 +1,111 @@
+'use client'
+
+import { CreditCard, CheckCircle2, ArrowUpRight } from 'lucide-react'
+import { siteConfig } from '@/config/site'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Separator } from '@/components/ui/separator'
+
+const currentPlan = siteConfig.pricing[0]
+
+const invoiceHistory = [
+  { id: 'INV-001', date: '01/06/2024', amount: '$0', status: 'Pagado', plan: 'Free' },
+  { id: 'INV-002', date: '01/05/2024', amount: '$0', status: 'Pagado', plan: 'Free' },
+  { id: 'INV-003', date: '01/04/2024', amount: '$0', status: 'Pagado', plan: 'Free' },
+]
+
+export default function BillingPage() {
+  return (
+    <div className="max-w-2xl space-y-6">
+      {/* Current plan */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-start justify-between">
+            <div>
+              <CardTitle>Plan actual</CardTitle>
+              <CardDescription>Tus beneficios y límites vigentes.</CardDescription>
+            </div>
+            <Badge variant="secondary">{currentPlan.name}</Badge>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-end gap-1">
+            <span className="text-3xl font-bold">{currentPlan.price}</span>
+            {currentPlan.period && (
+              <span className="mb-1 text-sm text-muted-foreground">{currentPlan.period}</span>
+            )}
+          </div>
+
+          <ul className="space-y-2">
+            {currentPlan.features.map((f) => (
+              <li key={f} className="flex items-center gap-2 text-sm">
+                <CheckCircle2 className="size-4 text-primary" />
+                {f}
+              </li>
+            ))}
+          </ul>
+
+          <Separator />
+
+          <div className="flex flex-col gap-2 sm:flex-row">
+            <Button className="gap-2">
+              <ArrowUpRight className="size-4" />
+              Actualizar a Pro
+            </Button>
+            <Button variant="outline" disabled>
+              Cancelar suscripción
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Payment method */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Método de pago</CardTitle>
+          <CardDescription>Administrá tus tarjetas guardadas.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center justify-between rounded-lg border p-4">
+            <div className="flex items-center gap-3">
+              <CreditCard className="size-5 text-muted-foreground" />
+              <div>
+                <p className="text-sm font-medium">Sin método de pago</p>
+                <p className="text-xs text-muted-foreground">Agregá una tarjeta para actualizar tu plan</p>
+              </div>
+            </div>
+            <Button variant="outline" size="sm" disabled>
+              Agregar tarjeta
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* History */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Historial de facturación</CardTitle>
+          <CardDescription>Tus últimas facturas generadas.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-2">
+            {invoiceHistory.map((inv) => (
+              <div key={inv.id} className="flex items-center justify-between rounded-md border p-3 text-sm">
+                <div className="flex items-center gap-4">
+                  <span className="font-mono text-xs text-muted-foreground">{inv.id}</span>
+                  <span>{inv.date}</span>
+                  <Badge variant="outline">{inv.plan}</Badge>
+                </div>
+                <div className="flex items-center gap-4">
+                  <span className="font-medium">{inv.amount}</span>
+                  <Badge variant="secondary" className="text-xs">{inv.status}</Badge>
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

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

@@ -1,34 +1,103 @@
 'use client'
 
+import { Users, BarChart3, TrendingUp, Activity } from 'lucide-react'
 import { useAuth } from '@/lib/hooks/use-auth'
+import { StatCard } from '@/components/dashboard/stat-card'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { Rocket } from 'lucide-react'
+import { Badge } from '@/components/ui/badge'
+import { Skeleton } from '@/components/ui/skeleton'
+
+const stats = [
+  {
+    title: 'Usuarios activos',
+    value: '—',
+    description: 'Total de cuentas registradas',
+    icon: Users,
+    trend: { value: '0%', positive: true },
+  },
+  {
+    title: 'Ingresos del mes',
+    value: '$—',
+    description: 'Facturación del período actual',
+    icon: TrendingUp,
+    trend: { value: '0%', positive: true },
+  },
+  {
+    title: 'Eventos totales',
+    value: '—',
+    description: 'Acciones registradas hoy',
+    icon: Activity,
+    trend: { value: '0%', positive: true },
+  },
+  {
+    title: 'Conversión',
+    value: '—%',
+    description: 'Free → plan de pago',
+    icon: BarChart3,
+    trend: { value: '0 pts', positive: true },
+  },
+]
+
+const quickStart = [
+  { step: '1', title: 'Configurá el backend', description: 'Completá las variables en /backend/.env con tu cadena de MongoDB y las keys de JWT.' },
+  { step: '2', title: 'Personalizá la landing', description: 'Editá src/config/site.ts para cambiar nombre, tagline, precios y contenido.' },
+  { step: '3', title: 'Conectá tu dominio', description: 'Apuntá tu DNS al servidor y configurá SSL. Consultá la guía de deploy.' },
+  { step: '4', title: 'Activá los pagos', description: 'Integrá Stripe u otro procesador en el módulo de facturación.' },
+]
 
 export default function DashboardPage() {
   const { user } = useAuth()
 
+  if (!user) {
+    return (
+      <div className="space-y-6">
+        <Skeleton className="h-8 w-48" />
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          {[...Array(4)].map((_, i) => <Skeleton key={i} className="h-28" />)}
+        </div>
+      </div>
+    )
+  }
+
   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>
+        <h2 className="text-2xl font-bold">Bienvenido, {user.name}</h2>
+        <p className="text-sm text-muted-foreground">{user.email}</p>
       </div>
-      <Card className="max-w-md">
+
+      {/* Stats */}
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        {stats.map((stat) => (
+          <StatCard key={stat.title} {...stat} />
+        ))}
+      </div>
+
+      {/* Quick start */}
+      <Card>
         <CardHeader>
           <div className="flex items-center gap-2">
-            <Rocket className="size-5" />
-            <CardTitle>Tu SaaS está listo para construir</CardTitle>
+            <CardTitle className="text-base">Primeros pasos</CardTitle>
+            <Badge variant="secondary" className="text-xs">Checklist</Badge>
           </div>
           <CardDescription>
-            El backend y el frontend están configurados y funcionando. Agregá tus módulos de negocio.
+            Seguí estos pasos para tener tu SaaS listo para producción.
           </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>
+          <ol className="space-y-4">
+            {quickStart.map((item) => (
+              <li key={item.step} className="flex gap-4">
+                <span className="flex size-6 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-bold text-primary">
+                  {item.step}
+                </span>
+                <div>
+                  <p className="text-sm font-medium">{item.title}</p>
+                  <p className="mt-0.5 text-xs text-muted-foreground">{item.description}</p>
+                </div>
+              </li>
+            ))}
+          </ol>
         </CardContent>
       </Card>
     </div>

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

@@ -1,14 +1,13 @@
 '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'
+import { DashboardSidebar } from '@/components/dashboard/sidebar'
+import { DashboardHeader } from '@/components/dashboard/header'
 
 export default function DashboardLayout({ children }: { children: React.ReactNode }) {
-  const { user, isAuthenticated, isLoading, logout } = useAuth()
+  const { isAuthenticated, isLoading } = useAuth()
   const router = useRouter()
 
   useEffect(() => {
@@ -19,8 +18,8 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
 
   if (isLoading) {
     return (
-      <div className="min-h-screen flex items-center justify-center">
-        <div className="text-muted-foreground text-sm">Cargando...</div>
+      <div className="flex min-h-screen items-center justify-center">
+        <div className="text-sm text-muted-foreground">Cargando...</div>
       </div>
     )
   }
@@ -28,32 +27,12 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
   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 className="flex min-h-screen">
+      <DashboardSidebar />
+      <div className="flex flex-1 flex-col overflow-hidden">
+        <DashboardHeader />
+        <main className="flex-1 overflow-auto p-6">{children}</main>
+      </div>
     </div>
   )
 }

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

@@ -0,0 +1,226 @@
+'use client'
+
+import { useState } from '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'
+import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+import { Separator } from '@/components/ui/separator'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog'
+
+function getInitials(name: string) {
+  return name.split(' ').map((n) => n[0]).slice(0, 2).join('').toUpperCase()
+}
+
+interface ProfileForm {
+  name: string
+  email: string
+}
+
+interface PasswordForm {
+  currentPassword: string
+  newPassword: string
+  confirmPassword: string
+}
+
+export default function ProfilePage() {
+  const { user } = useAuth()
+  const [saved, setSaved] = useState(false)
+  const [passwordOpen, setPasswordOpen] = useState(false)
+
+  const form = useForm<ProfileForm>({
+    values: { name: user?.name ?? '', email: user?.email ?? '' },
+  })
+
+  const passwordForm = useForm<PasswordForm>({
+    defaultValues: { currentPassword: '', newPassword: '', confirmPassword: '' },
+  })
+
+  async function onSaveProfile(data: ProfileForm) {
+    // TODO: llamar a PATCH /users/me con data
+    console.log('Guardar perfil:', data)
+    setSaved(true)
+    setTimeout(() => setSaved(false), 2000)
+  }
+
+  async function onChangePassword(data: PasswordForm) {
+    if (data.newPassword !== data.confirmPassword) {
+      passwordForm.setError('confirmPassword', { message: 'Las contraseñas no coinciden' })
+      return
+    }
+    // TODO: llamar a POST /auth/change-password con data
+    console.log('Cambiar contraseña:', data)
+    setPasswordOpen(false)
+    passwordForm.reset()
+  }
+
+  return (
+    <div className="max-w-2xl space-y-6">
+      {/* Avatar */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Foto de perfil</CardTitle>
+          <CardDescription>Tu avatar se genera automáticamente con tus iniciales.</CardDescription>
+        </CardHeader>
+        <CardContent className="flex items-center gap-4">
+          <Avatar className="size-16">
+            <AvatarFallback className="text-lg">
+              {user?.name ? getInitials(user.name) : 'U'}
+            </AvatarFallback>
+          </Avatar>
+          <div>
+            <p className="font-medium">{user?.name}</p>
+            <p className="text-sm text-muted-foreground">{user?.email}</p>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Info */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Información personal</CardTitle>
+          <CardDescription>Actualizá tu nombre y email de acceso.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSaveProfile)} className="space-y-4">
+              <FormField
+                control={form.control}
+                name="name"
+                rules={{ required: 'El nombre es requerido' }}
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Nombre completo</FormLabel>
+                    <FormControl>
+                      <Input {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="email"
+                rules={{ required: 'El email es requerido' }}
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Email</FormLabel>
+                    <FormControl>
+                      <Input type="email" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <Button type="submit" disabled={form.formState.isSubmitting}>
+                {saved ? 'Guardado' : 'Guardar cambios'}
+              </Button>
+            </form>
+          </Form>
+        </CardContent>
+      </Card>
+
+      {/* Security */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Seguridad</CardTitle>
+          <CardDescription>Gestioná tu contraseña y métodos de acceso.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium">Contraseña</p>
+              <p className="text-xs text-muted-foreground">Última actualización: desconocida</p>
+            </div>
+            <Dialog open={passwordOpen} onOpenChange={setPasswordOpen}>
+              <DialogTrigger asChild>
+                <Button variant="outline" size="sm">Cambiar contraseña</Button>
+              </DialogTrigger>
+              <DialogContent>
+                <DialogHeader>
+                  <DialogTitle>Cambiar contraseña</DialogTitle>
+                  <DialogDescription>
+                    Ingresá tu contraseña actual y la nueva para continuar.
+                  </DialogDescription>
+                </DialogHeader>
+                <Form {...passwordForm}>
+                  <form onSubmit={passwordForm.handleSubmit(onChangePassword)} className="space-y-4">
+                    <FormField
+                      control={passwordForm.control}
+                      name="currentPassword"
+                      rules={{ required: 'Requerido' }}
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Contraseña actual</FormLabel>
+                          <FormControl><Input type="password" {...field} /></FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                    <FormField
+                      control={passwordForm.control}
+                      name="newPassword"
+                      rules={{ required: 'Requerido', minLength: { value: 8, message: 'Mínimo 8 caracteres' } }}
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Nueva contraseña</FormLabel>
+                          <FormControl><Input type="password" {...field} /></FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                    <FormField
+                      control={passwordForm.control}
+                      name="confirmPassword"
+                      rules={{ required: 'Requerido' }}
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Confirmar contraseña</FormLabel>
+                          <FormControl><Input type="password" {...field} /></FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                    <DialogFooter>
+                      <Button type="button" variant="ghost" onClick={() => setPasswordOpen(false)}>
+                        Cancelar
+                      </Button>
+                      <Button type="submit" disabled={passwordForm.formState.isSubmitting}>
+                        Guardar
+                      </Button>
+                    </DialogFooter>
+                  </form>
+                </Form>
+              </DialogContent>
+            </Dialog>
+          </div>
+
+          <Separator />
+
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium">Eliminar cuenta</p>
+              <p className="text-xs text-muted-foreground">
+                Esta acción es permanente e irreversible.
+              </p>
+            </div>
+            <Button variant="destructive" size="sm" disabled>
+              Eliminar cuenta
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}