ar-saas 0.3.0 → 0.3.2

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

@@ -1,78 +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>
-  )
-}
+'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)/billing/page.tsx

@@ -1,111 +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>
-  )
-}
+'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,105 +1,105 @@
-'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 { 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>
-        <h2 className="text-2xl font-bold">Bienvenido, {user.name}</h2>
-        <p className="text-sm text-muted-foreground">{user.email}</p>
-      </div>
-
-      {/* 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">
-            <CardTitle className="text-base">Primeros pasos</CardTitle>
-            <Badge variant="secondary" className="text-xs">Checklist</Badge>
-          </div>
-          <CardDescription>
-            Seguí estos pasos para tener tu SaaS listo para producción.
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <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>
-  )
-}
+'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 { 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>
+        <h2 className="text-2xl font-bold">Bienvenido, {user.name}</h2>
+        <p className="text-sm text-muted-foreground">{user.email}</p>
+      </div>
+
+      {/* 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">
+            <CardTitle className="text-base">Primeros pasos</CardTitle>
+            <Badge variant="secondary" className="text-xs">Checklist</Badge>
+          </div>
+          <CardDescription>
+            Seguí estos pasos para tener tu SaaS listo para producción.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <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>
+  )
+}