ar-saas 0.2.1 → 0.3.1

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

@@ -0,0 +1,156 @@
+'use client'
+
+import { useState } from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Switch } from '@/components/ui/switch'
+import { Separator } from '@/components/ui/separator'
+import { Button } from '@/components/ui/button'
+import { Label } from '@/components/ui/label'
+import { Badge } from '@/components/ui/badge'
+
+interface NotificationSettings {
+  emailMarketing: boolean
+  emailProduct: boolean
+  emailSecurity: boolean
+  pushAll: boolean
+}
+
+interface WorkspaceSettings {
+  publicProfile: boolean
+  allowInvites: boolean
+}
+
+export default function SettingsPage() {
+  const [notifications, setNotifications] = useState<NotificationSettings>({
+    emailMarketing: false,
+    emailProduct: true,
+    emailSecurity: true,
+    pushAll: false,
+  })
+
+  const [workspace, setWorkspace] = useState<WorkspaceSettings>({
+    publicProfile: false,
+    allowInvites: true,
+  })
+
+  const [saved, setSaved] = useState(false)
+
+  function toggleNotification(key: keyof NotificationSettings) {
+    setNotifications((prev) => ({ ...prev, [key]: !prev[key] }))
+  }
+
+  function toggleWorkspace(key: keyof WorkspaceSettings) {
+    setWorkspace((prev) => ({ ...prev, [key]: !prev[key] }))
+  }
+
+  function handleSave() {
+    // TODO: llamar a PATCH /users/me/settings con notifications y workspace
+    console.log('Guardar ajustes:', { notifications, workspace })
+    setSaved(true)
+    setTimeout(() => setSaved(false), 2000)
+  }
+
+  return (
+    <div className="max-w-2xl space-y-6">
+      {/* Notificaciones */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Notificaciones por email</CardTitle>
+          <CardDescription>Elegí qué correos querés recibir de nuestra parte.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {[
+            {
+              key: 'emailSecurity' as const,
+              label: 'Seguridad',
+              description: 'Alertas de inicio de sesión y cambios de contraseña.',
+              badge: 'Recomendado',
+            },
+            {
+              key: 'emailProduct' as const,
+              label: 'Actualizaciones del producto',
+              description: 'Nuevas funcionalidades, mejoras y fixes importantes.',
+              badge: null,
+            },
+            {
+              key: 'emailMarketing' as const,
+              label: 'Marketing y promociones',
+              description: 'Ofertas, descuentos y contenido educativo.',
+              badge: null,
+            },
+          ].map(({ key, label, description, badge }) => (
+            <div key={key} className="flex items-start justify-between gap-4">
+              <div className="space-y-0.5">
+                <div className="flex items-center gap-2">
+                  <Label className="text-sm font-medium">{label}</Label>
+                  {badge && <Badge variant="secondary" className="text-xs">{badge}</Badge>}
+                </div>
+                <p className="text-xs text-muted-foreground">{description}</p>
+              </div>
+              <Switch
+                checked={notifications[key]}
+                onCheckedChange={() => toggleNotification(key)}
+              />
+            </div>
+          ))}
+        </CardContent>
+      </Card>
+
+      {/* Workspace */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Workspace</CardTitle>
+          <CardDescription>Configuración de tu espacio de trabajo.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-start justify-between gap-4">
+            <div className="space-y-0.5">
+              <Label className="text-sm font-medium">Perfil público</Label>
+              <p className="text-xs text-muted-foreground">
+                Permite que otros usuarios encuentren tu perfil.
+              </p>
+            </div>
+            <Switch
+              checked={workspace.publicProfile}
+              onCheckedChange={() => toggleWorkspace('publicProfile')}
+            />
+          </div>
+
+          <Separator />
+
+          <div className="flex items-start justify-between gap-4">
+            <div className="space-y-0.5">
+              <Label className="text-sm font-medium">Invitaciones de equipo</Label>
+              <p className="text-xs text-muted-foreground">
+                Permite que otros te inviten a sus workspaces.
+              </p>
+            </div>
+            <Switch
+              checked={workspace.allowInvites}
+              onCheckedChange={() => toggleWorkspace('allowInvites')}
+            />
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Danger zone */}
+      <Card className="border-destructive/40">
+        <CardHeader>
+          <CardTitle className="text-destructive">Zona peligrosa</CardTitle>
+          <CardDescription>Acciones irreversibles sobre tu cuenta.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium">Exportar mis datos</p>
+              <p className="text-xs text-muted-foreground">Descargá toda tu información en formato JSON.</p>
+            </div>
+            <Button variant="outline" size="sm" disabled>Exportar</Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Button onClick={handleSave}>{saved ? 'Guardado' : 'Guardar ajustes'}</Button>
+    </div>
+  )
+}

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

@@ -0,0 +1,178 @@
+'use client'
+
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { UserPlus, MoreHorizontal, Crown, User } from 'lucide-react'
+import { useAuth } from '@/lib/hooks/use-auth'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+import { Badge } from '@/components/ui/badge'
+import { Input } from '@/components/ui/input'
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+
+function getInitials(name: string) {
+  return name.split(' ').map((n) => n[0]).slice(0, 2).join('').toUpperCase()
+}
+
+interface InviteForm {
+  email: string
+}
+
+export default function TeamPage() {
+  const { user } = useAuth()
+  const [inviteOpen, setInviteOpen] = useState(false)
+  const [invited, setInvited] = useState(false)
+
+  const members = [
+    { name: user?.name ?? 'Vos', email: user?.email ?? '', role: 'owner' as const },
+  ]
+
+  const form = useForm<InviteForm>({ defaultValues: { email: '' } })
+
+  async function onInvite(data: InviteForm) {
+    // TODO: llamar a POST /workspaces/invite con data.email
+    console.log('Invitar:', data.email)
+    setInvited(true)
+    setTimeout(() => {
+      setInvited(false)
+      setInviteOpen(false)
+      form.reset()
+    }, 1500)
+  }
+
+  return (
+    <div className="max-w-2xl space-y-6">
+      <Card>
+        <CardHeader>
+          <div className="flex items-start justify-between">
+            <div>
+              <CardTitle>Miembros del equipo</CardTitle>
+              <CardDescription>
+                Gestioná quién tiene acceso a tu workspace.
+              </CardDescription>
+            </div>
+            <Dialog open={inviteOpen} onOpenChange={setInviteOpen}>
+              <DialogTrigger asChild>
+                <Button size="sm" className="gap-2">
+                  <UserPlus className="size-4" />
+                  Invitar
+                </Button>
+              </DialogTrigger>
+              <DialogContent>
+                <DialogHeader>
+                  <DialogTitle>Invitar miembro</DialogTitle>
+                  <DialogDescription>
+                    Ingresá el email de la persona que querés agregar al workspace.
+                  </DialogDescription>
+                </DialogHeader>
+                <Form {...form}>
+                  <form onSubmit={form.handleSubmit(onInvite)} 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="colaborador@empresa.com" {...field} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                    <DialogFooter>
+                      <Button type="button" variant="ghost" onClick={() => setInviteOpen(false)}>
+                        Cancelar
+                      </Button>
+                      <Button type="submit" disabled={form.formState.isSubmitting}>
+                        {invited ? 'Invitación enviada' : 'Enviar invitación'}
+                      </Button>
+                    </DialogFooter>
+                  </form>
+                </Form>
+              </DialogContent>
+            </Dialog>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-3">
+            {members.map((member) => (
+              <div
+                key={member.email}
+                className="flex items-center justify-between rounded-lg border p-3"
+              >
+                <div className="flex items-center gap-3">
+                  <Avatar className="size-8">
+                    <AvatarFallback className="text-xs">{getInitials(member.name)}</AvatarFallback>
+                  </Avatar>
+                  <div>
+                    <p className="text-sm font-medium">{member.name}</p>
+                    <p className="text-xs text-muted-foreground">{member.email}</p>
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Badge variant={member.role === 'owner' ? 'default' : 'secondary'} className="gap-1 text-xs">
+                    {member.role === 'owner' ? (
+                      <><Crown className="size-3" /> Owner</>
+                    ) : (
+                      <><User className="size-3" /> Miembro</>
+                    )}
+                  </Badge>
+                  {member.role !== 'owner' && (
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" size="sm" className="size-7 p-0">
+                          <MoreHorizontal className="size-4" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem className="text-destructive focus:text-destructive">
+                          Eliminar miembro
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <p className="mt-4 text-center text-xs text-muted-foreground">
+            Plan Free · 1 de 3 usuarios
+          </p>
+        </CardContent>
+      </Card>
+
+      {/* Pending invitations placeholder */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Invitaciones pendientes</CardTitle>
+          <CardDescription>Invitaciones enviadas que aún no fueron aceptadas.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">No hay invitaciones pendientes.</p>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/templates/frontend/src/app/(legal)/privacy/page.tsx

@@ -0,0 +1,127 @@
+import Link from 'next/link'
+import { ArrowLeft } from 'lucide-react'
+import { siteConfig } from '@/config/site'
+
+export default function PrivacyPage() {
+  const { legal } = siteConfig
+
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="mx-auto max-w-3xl px-4 py-12">
+        <Link
+          href="/"
+          className="mb-8 inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground"
+        >
+          <ArrowLeft className="size-4" />
+          Volver al inicio
+        </Link>
+
+        <h1 className="text-3xl font-bold">Política de Privacidad</h1>
+        <p className="mt-2 text-sm text-muted-foreground">
+          Última actualización: {legal.lastUpdated}
+        </p>
+
+        <div className="mt-10 space-y-8 text-sm leading-relaxed">
+          <section>
+            <h2 className="text-lg font-semibold">1. Información que recopilamos</h2>
+            <p className="mt-3 text-muted-foreground">
+              Recopilamos información que nos proporcionás directamente (nombre, email, contraseña)
+              al crear una cuenta, así como datos de uso generados al interactuar con la Plataforma
+              (logs de acceso, funcionalidades utilizadas, configuraciones).
+            </p>
+          </section>
+
+          <section>
+            <h2 className="text-lg font-semibold">2. Cómo usamos tu información</h2>
+            <ul className="mt-3 list-inside list-disc space-y-2 text-muted-foreground">
+              <li>Proveer, mantener y mejorar el servicio.</li>
+              <li>Enviarte comunicaciones transaccionales (confirmaciones, alertas de seguridad).</li>
+              <li>Responder consultas y brindar soporte técnico.</li>
+              <li>Cumplir obligaciones legales aplicables.</li>
+              <li>Prevenir fraude y garantizar la seguridad de la plataforma.</li>
+            </ul>
+          </section>
+
+          <section>
+            <h2 className="text-lg font-semibold">3. Compartir información</h2>
+            <p className="mt-3 text-muted-foreground">
+              No vendemos ni compartimos tu información personal con terceros, salvo que sea
+              necesario para operar el servicio (proveedores de infraestructura, procesadores de
+              pago) o cuando lo exija la ley. Todos los subprocesadores están obligados
+              contractualmente a proteger tus datos.
+            </p>
+          </section>
+
+          <section>
+            <h2 className="text-lg font-semibold">4. Seguridad de los datos</h2>
+            <p className="mt-3 text-muted-foreground">
+              Implementamos medidas técnicas y organizativas razonables para proteger tu información,
+              incluyendo encriptación en tránsito (TLS) y en reposo. Sin embargo, ningún sistema
+              es 100% seguro; te recomendamos usar contraseñas únicas y fuertes.
+            </p>
+          </section>
+
+          <section>
+            <h2 className="text-lg font-semibold">5. Retención de datos</h2>
+            <p className="mt-3 text-muted-foreground">
+              Conservamos tu información mientras tu cuenta esté activa o según sea necesario para
+              los fines descritos. Si eliminás tu cuenta, procederemos a borrar tus datos dentro
+              de los 30 días hábiles posteriores, salvo que la ley exija conservarlos por más tiempo.
+            </p>
+          </section>
+
+          <section>
+            <h2 className="text-lg font-semibold">6. Tus derechos</h2>
+            <p className="mt-3 text-muted-foreground">
+              Tenés derecho a acceder, rectificar, eliminar o portar tus datos personales. También
+              podés oponerte o solicitar la limitación del tratamiento. Para ejercer estos derechos,
+              contactanos en{' '}
+              <a
+                href={`mailto:${legal.email}`}
+                className="underline underline-offset-4 hover:text-foreground"
+              >
+                {legal.email}
+              </a>
+              .
+            </p>
+          </section>
+
+          <section>
+            <h2 className="text-lg font-semibold">7. Cookies</h2>
+            <p className="mt-3 text-muted-foreground">
+              Utilizamos cookies estrictamente necesarias para el funcionamiento de la sesión.
+              No utilizamos cookies de tracking de terceros ni publicidad comportamental.
+            </p>
+          </section>
+
+          <section>
+            <h2 className="text-lg font-semibold">8. Cambios en esta política</h2>
+            <p className="mt-3 text-muted-foreground">
+              Podemos actualizar esta Política periódicamente. Te notificaremos por email ante
+              cambios significativos. La fecha de última actualización siempre estará visible
+              al inicio de este documento.
+            </p>
+          </section>
+
+          <section>
+            <h2 className="text-lg font-semibold">9. Contacto</h2>
+            <p className="mt-3 text-muted-foreground">
+              Para cualquier consulta sobre privacidad escribinos a{' '}
+              <a
+                href={`mailto:${legal.email}`}
+                className="underline underline-offset-4 hover:text-foreground"
+              >
+                {legal.email}
+              </a>
+              . También podés consultar nuestros{' '}
+              <Link href="/terms" className="underline underline-offset-4 hover:text-foreground">
+                Términos y Condiciones
+              </Link>
+              .
+            </p>
+          </section>
+        </div>
+      </div>
+    </div>
+  )
+}

package/templates/frontend/src/app/(legal)/terms/page.tsx

@@ -0,0 +1,118 @@
+import Link from 'next/link'
+import { ArrowLeft } from 'lucide-react'
+import { siteConfig } from '@/config/site'
+
+export default function TermsPage() {
+  const { legal } = siteConfig
+
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="mx-auto max-w-3xl px-4 py-12">
+        <Link
+          href="/"
+          className="mb-8 inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground"
+        >
+          <ArrowLeft className="size-4" />
+          Volver al inicio
+        </Link>
+
+        <h1 className="text-3xl font-bold">Términos y Condiciones</h1>
+        <p className="mt-2 text-sm text-muted-foreground">
+          Última actualización: {legal.lastUpdated}
+        </p>
+
+        <div className="prose prose-neutral dark:prose-invert mt-10 max-w-none space-y-8 text-sm leading-relaxed text-foreground">
+          <section>
+            <h2 className="text-lg font-semibold">1. Aceptación de los términos</h2>
+            <p className="mt-3 text-muted-foreground">
+              Al acceder y utilizar los servicios de {legal.companyName} (&quot;la Plataforma&quot;),
+              aceptás quedar vinculado por estos Términos y Condiciones. Si no estás de acuerdo,
+              no utilices la Plataforma.
+            </p>
+          </section>
+
+          <section>
+            <h2 className="text-lg font-semibold">2. Descripción del servicio</h2>
+            <p className="mt-3 text-muted-foreground">
+              {legal.companyName} provee una plataforma de software como servicio (SaaS) accesible
+              a través de la web. Nos reservamos el derecho de modificar, suspender o discontinuar
+              cualquier aspecto del servicio en cualquier momento.
+            </p>
+          </section>
+
+          <section>
+            <h2 className="text-lg font-semibold">3. Registro y cuenta</h2>
+            <p className="mt-3 text-muted-foreground">
+              Para acceder a ciertas funcionalidades debés crear una cuenta. Sos responsable de
+              mantener la confidencialidad de tus credenciales y de todas las actividades que
+              ocurran bajo tu cuenta. Notificanos inmediatamente ante cualquier uso no autorizado.
+            </p>
+          </section>
+
+          <section>
+            <h2 className="text-lg font-semibold">4. Facturación y pagos</h2>
+            <p className="mt-3 text-muted-foreground">
+              Los planes de pago se facturan de forma recurrente (mensual o anual) según el plan
+              elegido. Los precios están sujetos a cambios con previo aviso de 30 días. Las
+              cancelaciones surten efecto al final del período facturado.
+            </p>
+          </section>
+
+          <section>
+            <h2 className="text-lg font-semibold">5. Propiedad intelectual</h2>
+            <p className="mt-3 text-muted-foreground">
+              Todo el contenido de la Plataforma (código, diseño, logos, textos) es propiedad
+              exclusiva de {legal.companyName} o sus licenciantes. No podés copiar, modificar ni
+              distribuir ningún elemento sin autorización expresa y escrita.
+            </p>
+          </section>
+
+          <section>
+            <h2 className="text-lg font-semibold">6. Datos del usuario</h2>
+            <p className="mt-3 text-muted-foreground">
+              Sos propietario de los datos que cargás en la Plataforma. Nos otorgás una licencia
+              limitada para procesarlos únicamente con el fin de prestar el servicio. Consultá
+              nuestra{' '}
+              <Link href="/privacy" className="underline underline-offset-4 hover:text-foreground">
+                Política de Privacidad
+              </Link>{' '}
+              para más detalles.
+            </p>
+          </section>
+
+          <section>
+            <h2 className="text-lg font-semibold">7. Limitación de responsabilidad</h2>
+            <p className="mt-3 text-muted-foreground">
+              En la máxima medida permitida por la ley, {legal.companyName} no será responsable
+              por daños indirectos, incidentales, especiales o consecuentes derivados del uso o
+              imposibilidad de uso de la Plataforma.
+            </p>
+          </section>
+
+          <section>
+            <h2 className="text-lg font-semibold">8. Modificaciones</h2>
+            <p className="mt-3 text-muted-foreground">
+              Podemos actualizar estos Términos periódicamente. Te notificaremos por email ante
+              cambios materiales. El uso continuado de la Plataforma constituye aceptación de los
+              nuevos términos.
+            </p>
+          </section>
+
+          <section>
+            <h2 className="text-lg font-semibold">9. Contacto</h2>
+            <p className="mt-3 text-muted-foreground">
+              Para consultas sobre estos Términos escribinos a{' '}
+              <a
+                href={`mailto:${legal.email}`}
+                className="underline underline-offset-4 hover:text-foreground"
+              >
+                {legal.email}
+              </a>
+              .
+            </p>
+          </section>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -1,5 +1,45 @@
-import { redirect } from 'next/navigation'
+import { LandingNavbar } from '@/components/landing/navbar'
+import { LandingHero } from '@/components/landing/hero'
+import { LandingFeatures } from '@/components/landing/features'
+import { LandingPricing } from '@/components/landing/pricing'
+import { LandingFaq } from '@/components/landing/faq'
+import { LandingFooter } from '@/components/landing/footer'
+import { siteConfig } from '@/config/site'
+import Link from 'next/link'
+import { Button } from '@/components/ui/button'
 
-export default function Home() {
-  redirect('/setup')
+export default function LandingPage() {
+  return (
+    <div className="flex min-h-screen flex-col">
+      <LandingNavbar />
+      <main className="flex-1">
+        <LandingHero />
+        <LandingFeatures />
+        <LandingPricing />
+
+        {/* CTA final */}
+        <section className="py-20 md:py-28">
+          <div className="mx-auto max-w-3xl px-4 text-center">
+            <h2 className="text-3xl font-bold tracking-tight md:text-4xl">
+              ¿Listo para empezar?
+            </h2>
+            <p className="mt-4 text-muted-foreground">
+              Creá tu cuenta gratis y tené tu SaaS funcionando en minutos.
+            </p>
+            <div className="mt-8 flex flex-col items-center justify-center gap-4 sm:flex-row">
+              <Button size="lg" asChild>
+                <Link href="/register">{siteConfig.hero.cta.label}</Link>
+              </Button>
+              <Button size="lg" variant="outline" asChild>
+                <Link href="/login">Iniciar sesión</Link>
+              </Button>
+            </div>
+          </div>
+        </section>
+
+        <LandingFaq />
+      </main>
+      <LandingFooter />
+    </div>
+  )
 }

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

@@ -118,10 +118,7 @@ export default function SetupPage() {
 
   useEffect(() => {
     setMounted(true)
-    if (localStorage.getItem('setup_dismissed') === 'true') {
-      router.replace('/login')
-    }
-  }, [router])
+  }, [])
 
   const handleDone = () => {
     localStorage.setItem('setup_dismissed', 'true')