ar-saas 0.4.2 → 0.5.0

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

@@ -15,7 +15,13 @@ export default function AuthLayout({ children }: { children: React.ReactNode })
     }
   }, [isAuthenticated, isLoading, router])
 
-  if (isLoading) return null
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-muted/40">
+        <div className="text-sm text-muted-foreground">Cargando...</div>
+      </div>
+    )
+  }
 
   return (
     <div className="min-h-screen flex flex-col items-center justify-center bg-muted/40 px-4">

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

@@ -9,6 +9,8 @@ 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 { Separator } from '@/components/ui/separator'
+import { GitHubButton } from '@/components/auth/github-button'
 
 interface LoginForm {
   email: string
@@ -99,6 +101,17 @@ export default function LoginPage() {
             </Button>
           </form>
         </Form>
+        <div className="mt-4 space-y-3">
+          <div className="relative">
+            <div className="absolute inset-0 flex items-center">
+              <Separator />
+            </div>
+            <div className="relative flex justify-center text-xs uppercase">
+              <span className="bg-card px-2 text-muted-foreground">o continuá con</span>
+            </div>
+          </div>
+          <GitHubButton />
+        </div>
         <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">

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

@@ -9,6 +9,8 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { Checkbox } from '@/components/ui/checkbox'
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
+import { Separator } from '@/components/ui/separator'
+import { GitHubButton } from '@/components/auth/github-button'
 
 interface RegisterForm {
   name: string
@@ -149,6 +151,17 @@ export default function RegisterPage() {
             </Button>
           </form>
         </Form>
+        <div className="mt-4 space-y-3">
+          <div className="relative">
+            <div className="absolute inset-0 flex items-center">
+              <Separator />
+            </div>
+            <div className="relative flex justify-center text-xs uppercase">
+              <span className="bg-card px-2 text-muted-foreground">o continuá con</span>
+            </div>
+          </div>
+          <GitHubButton />
+        </div>
         <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">

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

@@ -0,0 +1,295 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { Building2, Pencil, Trash2, Plus } from 'lucide-react'
+import { createClient, deleteClient, getClients, updateClient } from '@/lib/api/clients'
+import type { Client, CreateClientDto, QueryClientDto } from '@/types/clients'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Badge } from '@/components/ui/badge'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet'
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
+import { useToast } from '@/hooks/use-toast'
+
+export default function ClientsPage() {
+  const { toast } = useToast()
+  const [clients, setClients] = useState<Client[]>([])
+  const [loading, setLoading] = useState(true)
+  const [search, setSearch] = useState('')
+  const [statusFilter, setStatusFilter] = useState<string>('all')
+  const [sheetOpen, setSheetOpen] = useState(false)
+  const [editing, setEditing] = useState<Client | null>(null)
+  const [deleteTarget, setDeleteTarget] = useState<Client | null>(null)
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const form = useForm<CreateClientDto>({
+    defaultValues: { name: '', email: '', phone: '', address: '', notes: '', status: 'active' },
+  })
+
+  const load = useCallback(async (q: QueryClientDto = {}) => {
+    setLoading(true)
+    try {
+      const res = await getClients(q)
+      setClients(res.data)
+    } catch {
+      toast({ title: 'Error al cargar clientes', variant: 'destructive' })
+    } finally {
+      setLoading(false)
+    }
+  }, [toast])
+
+  useEffect(() => { load() }, [load])
+
+  const handleSearch = (value: string) => {
+    setSearch(value)
+    if (debounceRef.current) clearTimeout(debounceRef.current)
+    debounceRef.current = setTimeout(() => {
+      load({ search: value || undefined, status: statusFilter !== 'all' ? (statusFilter as 'active' | 'archived') : undefined })
+    }, 300)
+  }
+
+  const handleStatusFilter = (value: string) => {
+    setStatusFilter(value)
+    load({ search: search || undefined, status: value !== 'all' ? (value as 'active' | 'archived') : undefined })
+  }
+
+  const openCreate = () => {
+    setEditing(null)
+    form.reset({ name: '', email: '', phone: '', address: '', notes: '', status: 'active' })
+    setSheetOpen(true)
+  }
+
+  const openEdit = (client: Client) => {
+    setEditing(client)
+    form.reset({
+      name: client.name,
+      email: client.email ?? '',
+      phone: client.phone ?? '',
+      address: client.address ?? '',
+      notes: client.notes ?? '',
+      status: client.status,
+    })
+    setSheetOpen(true)
+  }
+
+  const onSubmit = async (data: CreateClientDto) => {
+    try {
+      if (editing) {
+        await updateClient(editing._id, data)
+        toast({ title: 'Cliente actualizado' })
+      } else {
+        await createClient(data)
+        toast({ title: 'Cliente creado' })
+      }
+      setSheetOpen(false)
+      load({ search: search || undefined, status: statusFilter !== 'all' ? (statusFilter as 'active' | 'archived') : undefined })
+    } catch {
+      toast({ title: 'Error al guardar cliente', variant: 'destructive' })
+    }
+  }
+
+  const handleDelete = async () => {
+    if (!deleteTarget) return
+    try {
+      await deleteClient(deleteTarget._id)
+      toast({ title: 'Cliente eliminado' })
+      setDeleteTarget(null)
+      load()
+    } catch {
+      toast({ title: 'Error al eliminar cliente', variant: 'destructive' })
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-6 p-6">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Building2 className="size-5" />
+          <h1 className="text-xl font-semibold">Clientes</h1>
+        </div>
+        <Button onClick={openCreate}>
+          <Plus className="mr-2 size-4" />
+          Nuevo cliente
+        </Button>
+      </div>
+
+      <div className="flex gap-3">
+        <Input
+          placeholder="Buscar por nombre o email..."
+          value={search}
+          onChange={e => handleSearch(e.target.value)}
+          className="max-w-sm"
+        />
+        <Select value={statusFilter} onValueChange={handleStatusFilter}>
+          <SelectTrigger className="w-44">
+            <SelectValue placeholder="Estado" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">Todos</SelectItem>
+            <SelectItem value="active">Activos</SelectItem>
+            <SelectItem value="archived">Archivados</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="rounded-lg border">
+        <table className="w-full text-sm">
+          <thead className="border-b bg-muted/40">
+            <tr>
+              <th className="px-4 py-3 text-left font-medium">Nombre</th>
+              <th className="px-4 py-3 text-left font-medium">Email</th>
+              <th className="px-4 py-3 text-left font-medium">Teléfono</th>
+              <th className="px-4 py-3 text-left font-medium">Estado</th>
+              <th className="px-4 py-3 text-left font-medium">Creado</th>
+              <th className="px-4 py-3 text-right font-medium">Acciones</th>
+            </tr>
+          </thead>
+          <tbody>
+            {loading ? (
+              Array.from({ length: 5 }).map((_, i) => (
+                <tr key={i} className="border-b">
+                  {Array.from({ length: 6 }).map((__, j) => (
+                    <td key={j} className="px-4 py-3"><Skeleton className="h-4 w-full" /></td>
+                  ))}
+                </tr>
+              ))
+            ) : clients.length === 0 ? (
+              <tr>
+                <td colSpan={6} className="px-4 py-12 text-center text-muted-foreground">
+                  No hay clientes. Creá el primero.
+                </td>
+              </tr>
+            ) : (
+              clients.map(client => (
+                <tr key={client._id} className="border-b last:border-0 hover:bg-muted/20">
+                  <td className="px-4 py-3 font-medium">{client.name}</td>
+                  <td className="px-4 py-3 text-muted-foreground">{client.email ?? '—'}</td>
+                  <td className="px-4 py-3 text-muted-foreground">{client.phone ?? '—'}</td>
+                  <td className="px-4 py-3">
+                    <Badge variant={client.status === 'active' ? 'default' : 'secondary'}>
+                      {client.status === 'active' ? 'Activo' : 'Archivado'}
+                    </Badge>
+                  </td>
+                  <td className="px-4 py-3 text-muted-foreground">
+                    {new Date(client.createdAt).toLocaleDateString('es-AR')}
+                  </td>
+                  <td className="px-4 py-3 text-right">
+                    <Button variant="ghost" size="icon" onClick={() => openEdit(client)}>
+                      <Pencil className="size-4" />
+                    </Button>
+                    <Button variant="ghost" size="icon" onClick={() => setDeleteTarget(client)}>
+                      <Trash2 className="size-4 text-destructive" />
+                    </Button>
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Sheet formulario */}
+      <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
+        <SheetContent className="w-full sm:max-w-md overflow-y-auto">
+          <SheetHeader>
+            <SheetTitle>{editing ? 'Editar cliente' : 'Nuevo cliente'}</SheetTitle>
+          </SheetHeader>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="mt-6 flex flex-col gap-4">
+              <FormField control={form.control} name="name" rules={{ required: 'El nombre es obligatorio' }}
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Nombre *</FormLabel>
+                    <FormControl><Input {...field} /></FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField control={form.control} name="email"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Email</FormLabel>
+                    <FormControl><Input type="email" {...field} /></FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField control={form.control} name="phone"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Teléfono</FormLabel>
+                    <FormControl><Input {...field} /></FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField control={form.control} name="address"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Dirección</FormLabel>
+                    <FormControl><Input {...field} /></FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField control={form.control} name="notes"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Notas</FormLabel>
+                    <FormControl><textarea className="w-full rounded-md border px-3 py-2 text-sm" rows={3} {...field} /></FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField control={form.control} name="status"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Estado</FormLabel>
+                    <Select value={field.value} onValueChange={field.onChange}>
+                      <FormControl>
+                        <SelectTrigger><SelectValue /></SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="active">Activo</SelectItem>
+                        <SelectItem value="archived">Archivado</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <div className="flex justify-end gap-2 pt-2">
+                <Button type="button" variant="outline" onClick={() => setSheetOpen(false)}>Cancelar</Button>
+                <Button type="submit" disabled={form.formState.isSubmitting}>
+                  {form.formState.isSubmitting ? 'Guardando...' : 'Guardar'}
+                </Button>
+              </div>
+            </form>
+          </Form>
+        </SheetContent>
+      </Sheet>
+
+      {/* AlertDialog eliminar */}
+      <AlertDialog open={!!deleteTarget} onOpenChange={open => !open && setDeleteTarget(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>¿Eliminar cliente?</AlertDialogTitle>
+            <AlertDialogDescription>
+              Esta acción eliminará a <strong>{deleteTarget?.name}</strong>. Se puede recuperar más tarde.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancelar</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDelete} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
+              Eliminar
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  )
+}