ar-saas 0.3.2 → 0.4.0

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

@@ -1,178 +1,179 @@
-'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>
-  )
-}
+'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): string {
+  return name
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean)
+    .map((n) => n[0])
+    .slice(0, 2)
+    .join('')
+    .toUpperCase() || 'U'
+}
+
+interface InviteForm {
+  email: string
+}
+
+export default function TeamPage() {
+  const { user } = useAuth()
+  const [inviteOpen, setInviteOpen] = useState(false)
+
+  const members = [
+    { name: user?.name ?? 'Vos', email: user?.email ?? '', role: 'owner' as const },
+  ]
+
+  const form = useForm<InviteForm>({ defaultValues: { email: '' } })
+
+  function onInvite(data: InviteForm) {
+    setInviteOpen(false)
+    form.reset()
+  }
+
+  return (
+    <div className="max-w-2xl space-y-6">
+      <div className="rounded-lg border border-amber-200 bg-amber-50 p-3">
+        <p className="text-xs text-amber-800 font-medium">Próximamente</p>
+        <p className="text-xs text-amber-700 mt-0.5">La gestión de equipo estará disponible en la próxima actualización.</p>
+      </div>
+
+      <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" disabled>
+                  <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>
+                        Próximamente
+                      </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>
+        </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/layout.tsx

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

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

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

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

@@ -139,7 +139,7 @@ export default function SetupPage() {
         <div className="mb-10">
           <div className="inline-flex items-center gap-2 bg-zinc-900 text-white text-xs font-mono px-3 py-1.5 rounded-full mb-4">
             <span className="w-1.5 h-1.5 bg-green-400 rounded-full animate-pulse" />
-            create-saas-ar
+            ar-saas
           </div>
           <h1 className="text-3xl font-bold text-zinc-900 mb-2">
             Tu proyecto está listo

package/templates/frontend/src/components/dashboard/header.tsx

@@ -22,13 +22,15 @@ const breadcrumbMap: Record<string, string> = {
   '/team': 'Equipo',
 }
 
-function getInitials(name: string) {
+function getInitials(name: string): string {
   return name
-    .split(' ')
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean)
     .map((n) => n[0])
     .slice(0, 2)
     .join('')
-    .toUpperCase()
+    .toUpperCase() || 'U'
 }
 
 export function DashboardHeader() {

package/templates/frontend/src/config/site.ts

@@ -183,7 +183,7 @@ export const siteConfig = {
       github: '',
       linkedin: '',
     },
-    copyright: '© 2024 __SITE_NAME__. Todos los derechos reservados.',
+    copyright: `© ${new Date().getFullYear()} __SITE_NAME__. Todos los derechos reservados.`,
   },
 
   // ── Legal ──────────────────────────────────────────────────────────────────