ar-saas 0.3.1 → 0.3.2

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

@@ -1,156 +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>
-  )
-}
+'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>
+  )
+}