ar-saas 0.4.3 → 0.5.0

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

@@ -1,155 +1,192 @@
 '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 { useEffect } from 'react'
+import { useForm } from 'react-hook-form'
+import { Settings, User, Lock, Building2 } from 'lucide-react'
+import apiClient from '@/lib/api/client'
+import { useAuth } from '@/lib/hooks/use-auth'
 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
+import { Input } from '@/components/ui/input'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
+import { Separator } from '@/components/ui/separator'
+import { useToast } from '@/hooks/use-toast'
+
+interface ProfileForm {
+  name: string
+  phone: string
+}
+
+interface WorkspaceForm {
+  name: string
 }
 
-interface WorkspaceSettings {
-  publicProfile: boolean
-  allowInvites: boolean
+interface PasswordForm {
+  currentPassword: string
+  newPassword: string
+  confirmPassword: string
 }
 
 export default function SettingsPage() {
-  const [notifications, setNotifications] = useState<NotificationSettings>({
-    emailMarketing: false,
-    emailProduct: true,
-    emailSecurity: true,
-    pushAll: false,
+  const { toast } = useToast()
+  const { user, refreshUser } = useAuth()
+
+  const profileForm = useForm<ProfileForm>({
+    defaultValues: { name: '', phone: '' },
+  })
+
+  const workspaceForm = useForm<WorkspaceForm>({
+    defaultValues: { name: '' },
   })
 
-  const [workspace, setWorkspace] = useState<WorkspaceSettings>({
-    publicProfile: false,
-    allowInvites: true,
+  const passwordForm = useForm<PasswordForm>({
+    defaultValues: { currentPassword: '', newPassword: '', confirmPassword: '' },
   })
 
-  function toggleNotification(key: keyof NotificationSettings) {
-    setNotifications((prev) => ({ ...prev, [key]: !prev[key] }))
+  useEffect(() => {
+    if (user) {
+      profileForm.reset({ name: user.name ?? '', phone: '' })
+    }
+  }, [user, profileForm])
+
+  useEffect(() => {
+    const fetchWorkspace = async () => {
+      try {
+        const ws = await apiClient.get('/api/workspaces/me') as { name: string }
+        workspaceForm.reset({ name: ws.name ?? '' })
+      } catch { /* workspace may not exist yet */ }
+    }
+    fetchWorkspace()
+  }, [workspaceForm])
+
+  const onProfileSubmit = async (data: ProfileForm) => {
+    try {
+      await apiClient.patch('/api/users/me', data)
+      await refreshUser()
+      toast({ title: 'Perfil actualizado' })
+    } catch {
+      toast({ title: 'Error al actualizar perfil', variant: 'destructive' })
+    }
+  }
+
+  const onWorkspaceSubmit = async (data: WorkspaceForm) => {
+    try {
+      await apiClient.patch('/api/workspaces/me', data)
+      toast({ title: 'Workspace actualizado' })
+    } catch {
+      toast({ title: 'Error al actualizar workspace', variant: 'destructive' })
+    }
   }
 
-  function toggleWorkspace(key: keyof WorkspaceSettings) {
-    setWorkspace((prev) => ({ ...prev, [key]: !prev[key] }))
+  const onPasswordSubmit = async (data: PasswordForm) => {
+    if (data.newPassword !== data.confirmPassword) {
+      passwordForm.setError('confirmPassword', { message: 'Las contraseñas no coinciden' })
+      return
+    }
+    try {
+      await apiClient.patch('/api/users/me', {
+        currentPassword: data.currentPassword,
+        newPassword: data.newPassword,
+      })
+      passwordForm.reset()
+      toast({ title: 'Contraseña actualizada' })
+    } catch {
+      toast({ title: 'Error al cambiar contraseña', variant: 'destructive' })
+    }
   }
 
   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 configuración de notificaciones y workspace estará disponible en la próxima actualización.</p>
+    <div className="flex flex-col gap-6 p-6 max-w-2xl">
+      <div className="flex items-center gap-2">
+        <Settings className="size-5" />
+        <h1 className="text-xl font-semibold">Configuración</h1>
       </div>
 
-      {/* 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>}
+      <Tabs defaultValue="profile">
+        <TabsList>
+          <TabsTrigger value="profile">
+            <User className="mr-2 size-4" />Perfil
+          </TabsTrigger>
+          <TabsTrigger value="security">
+            <Lock className="mr-2 size-4" />Seguridad
+          </TabsTrigger>
+          <TabsTrigger value="workspace">
+            <Building2 className="mr-2 size-4" />Workspace
+          </TabsTrigger>
+        </TabsList>
+
+        {/* Perfil */}
+        <TabsContent value="profile" className="mt-6">
+          <div className="rounded-xl border p-6">
+            <h2 className="text-base font-semibold mb-4">Información de perfil</h2>
+            <Form {...profileForm}>
+              <form onSubmit={profileForm.handleSubmit(onProfileSubmit)} className="flex flex-col gap-4">
+                <FormField control={profileForm.control} name="name" rules={{ required: 'El nombre es obligatorio' }} render={({ field }) => (
+                  <FormItem><FormLabel>Nombre</FormLabel><FormControl><Input {...field} /></FormControl><FormMessage /></FormItem>
+                )} />
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  <Input value={user?.email ?? ''} readOnly className="bg-muted/40 cursor-not-allowed" />
+                  <p className="text-xs text-muted-foreground">El email no se puede modificar.</p>
+                </FormItem>
+                <FormField control={profileForm.control} name="phone" render={({ field }) => (
+                  <FormItem><FormLabel>Teléfono</FormLabel><FormControl><Input {...field} /></FormControl></FormItem>
+                )} />
+                <div className="flex justify-end">
+                  <Button type="submit" disabled={profileForm.formState.isSubmitting}>
+                    {profileForm.formState.isSubmitting ? 'Guardando...' : 'Guardar cambios'}
+                  </Button>
                 </div>
-                <p className="text-xs text-muted-foreground">{description}</p>
-              </div>
-              <Switch
-                checked={notifications[key]}
-                onCheckedChange={() => toggleNotification(key)}
-                disabled
-              />
-            </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')}
-              disabled
-            />
+              </form>
+            </Form>
           </div>
+        </TabsContent>
 
-          <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')}
-              disabled
-            />
-          </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>
+        {/* Seguridad */}
+        <TabsContent value="security" className="mt-6">
+          <div className="rounded-xl border p-6">
+            <h2 className="text-base font-semibold mb-4">Cambiar contraseña</h2>
+            <Form {...passwordForm}>
+              <form onSubmit={passwordForm.handleSubmit(onPasswordSubmit)} className="flex flex-col gap-4">
+                <FormField control={passwordForm.control} name="currentPassword" rules={{ required: 'Requerida' }} render={({ field }) => (
+                  <FormItem><FormLabel>Contraseña actual</FormLabel><FormControl><Input type="password" {...field} /></FormControl><FormMessage /></FormItem>
+                )} />
+                <Separator />
+                <FormField control={passwordForm.control} name="newPassword" rules={{ required: 'Requerida', 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: 'Requerida' }} render={({ field }) => (
+                  <FormItem><FormLabel>Confirmar contraseña</FormLabel><FormControl><Input type="password" {...field} /></FormControl><FormMessage /></FormItem>
+                )} />
+                <div className="flex justify-end">
+                  <Button type="submit" disabled={passwordForm.formState.isSubmitting}>
+                    {passwordForm.formState.isSubmitting ? 'Actualizando...' : 'Cambiar contraseña'}
+                  </Button>
+                </div>
+              </form>
+            </Form>
           </div>
-        </CardContent>
-      </Card>
+        </TabsContent>
 
-      <Button disabled>Guardar ajustes</Button>
+        {/* Workspace */}
+        <TabsContent value="workspace" className="mt-6">
+          <div className="rounded-xl border p-6">
+            <h2 className="text-base font-semibold mb-4">Configuración del workspace</h2>
+            <Form {...workspaceForm}>
+              <form onSubmit={workspaceForm.handleSubmit(onWorkspaceSubmit)} className="flex flex-col gap-4">
+                <FormField control={workspaceForm.control} name="name" rules={{ required: 'El nombre es obligatorio' }} render={({ field }) => (
+                  <FormItem><FormLabel>Nombre del workspace</FormLabel><FormControl><Input {...field} /></FormControl><FormMessage /></FormItem>
+                )} />
+                <div className="flex justify-end">
+                  <Button type="submit" disabled={workspaceForm.formState.isSubmitting}>
+                    {workspaceForm.formState.isSubmitting ? 'Guardando...' : 'Guardar cambios'}
+                  </Button>
+                </div>
+              </form>
+            </Form>
+          </div>
+        </TabsContent>
+      </Tabs>
     </div>
   )
 }