@imansi/templates 0.1.0

package/src/dashboard/SettingsPage.jsx

@@ -0,0 +1,415 @@
+import { useState } from 'react';
+import {
+  Alert,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Input,
+  Label,
+  Separator,
+  Switch,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Textarea,
+} from '@imansi/ui';
+import { DashboardLayout } from '../layouts/DashboardLayout.jsx';
+
+export function SettingsPage({
+  brandName,
+  brandLogo,
+  navSections,
+  user,
+  userMenuItems,
+  notificationsCount,
+  onLogout,
+
+  title = 'Configuración',
+  subtitle = 'Administrá tu cuenta y preferencias.',
+
+  defaultTab = 'profile',
+
+  onSaveProfile,
+  onSaveAccount,
+  onSaveNotifications,
+  onSaveSecurity,
+  onChangePassword,
+  onDeleteAccount,
+}) {
+  const [tab, setTab] = useState(defaultTab);
+  const [saving, setSaving] = useState(false);
+
+  const [profile, setProfile] = useState({
+    name: user?.name || '',
+    email: user?.email || '',
+    bio: '',
+    company: '',
+    website: '',
+  });
+
+  const [account, setAccount] = useState({
+    language: 'es',
+    timezone: 'America/Argentina/Buenos_Aires',
+    dateFormat: 'dd/mm/yyyy',
+  });
+
+  const [notifications, setNotifications] = useState({
+    emailProduct: true,
+    emailSecurity: true,
+    emailMarketing: false,
+    pushProduct: false,
+    pushSecurity: true,
+  });
+
+  async function handleSave(handler, data) {
+    if (!handler) return;
+    setSaving(true);
+    await handler(data);
+    setSaving(false);
+  }
+
+  return (
+    <DashboardLayout
+      brandName={brandName}
+      brandLogo={brandLogo}
+      navSections={navSections}
+      user={user}
+      userMenuItems={userMenuItems}
+      notificationsCount={notificationsCount}
+      onLogout={onLogout}
+      title={title}
+    >
+      <div className="space-y-6 max-w-4xl mx-auto">
+        {/* Header */}
+        <div className="space-y-1">
+          <h1 className="text-h2 font-bold tracking-tight">{title}</h1>
+          <p className="text-small text-muted-foreground">{subtitle}</p>
+        </div>
+
+        {/* Tabs */}
+        <Tabs value={tab} onValueChange={setTab} className="space-y-6">
+          <TabsList>
+            <TabsTrigger value="profile">Perfil</TabsTrigger>
+            <TabsTrigger value="account">Cuenta</TabsTrigger>
+            <TabsTrigger value="notifications">Notificaciones</TabsTrigger>
+            <TabsTrigger value="security">Seguridad</TabsTrigger>
+          </TabsList>
+
+          {/* ============ PERFIL ============ */}
+          <TabsContent value="profile">
+            <Card>
+              <CardHeader>
+                <CardTitle>Información personal</CardTitle>
+                <CardDescription>
+                  Esta información se mostrará en tu perfil público.
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-6">
+                <div className="grid gap-5 sm:grid-cols-2">
+                  <div className="space-y-1.5">
+                    <Label htmlFor="settings-name">Nombre completo</Label>
+                    <Input
+                      id="settings-name"
+                      value={profile.name}
+                      onChange={(e) =>
+                        setProfile({ ...profile, name: e.target.value })
+                      }
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label htmlFor="settings-email">Correo electrónico</Label>
+                    <Input
+                      id="settings-email"
+                      type="email"
+                      value={profile.email}
+                      onChange={(e) =>
+                        setProfile({ ...profile, email: e.target.value })
+                      }
+                    />
+                  </div>
+                </div>
+
+                <div className="space-y-1.5">
+                  <Label htmlFor="settings-bio">Biografía</Label>
+                  <Textarea
+                    id="settings-bio"
+                    rows={3}
+                    placeholder="Contanos algo sobre vos..."
+                    value={profile.bio}
+                    onChange={(e) =>
+                      setProfile({ ...profile, bio: e.target.value })
+                    }
+                  />
+                </div>
+
+                <div className="grid gap-5 sm:grid-cols-2">
+                  <div className="space-y-1.5">
+                    <Label htmlFor="settings-company">Empresa</Label>
+                    <Input
+                      id="settings-company"
+                      value={profile.company}
+                      onChange={(e) =>
+                        setProfile({ ...profile, company: e.target.value })
+                      }
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label htmlFor="settings-website">Sitio web</Label>
+                    <Input
+                      id="settings-website"
+                      type="url"
+                      placeholder="https://..."
+                      value={profile.website}
+                      onChange={(e) =>
+                        setProfile({ ...profile, website: e.target.value })
+                      }
+                    />
+                  </div>
+                </div>
+
+                <Separator />
+
+                <div className="flex justify-end gap-2">
+                  <Button variant="ghost">Cancelar</Button>
+                  <Button
+                    disabled={saving}
+                    onClick={() => handleSave(onSaveProfile, profile)}
+                  >
+                    {saving ? 'Guardando...' : 'Guardar cambios'}
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          {/* ============ CUENTA ============ */}
+          <TabsContent value="account">
+            <Card>
+              <CardHeader>
+                <CardTitle>Preferencias</CardTitle>
+                <CardDescription>
+                  Configurá el idioma, la zona horaria y los formatos.
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-5">
+                <div className="grid gap-5 sm:grid-cols-2">
+                  <div className="space-y-1.5">
+                    <Label htmlFor="settings-language">Idioma</Label>
+                    <select
+                      id="settings-language"
+                      value={account.language}
+                      onChange={(e) =>
+                        setAccount({ ...account, language: e.target.value })
+                      }
+                      className="flex h-10 w-full rounded-md border border-border bg-input px-3 py-2 text-body text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+                    >
+                      <option value="es">Español</option>
+                      <option value="en">English</option>
+                      <option value="pt">Português</option>
+                    </select>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label htmlFor="settings-timezone">Zona horaria</Label>
+                    <select
+                      id="settings-timezone"
+                      value={account.timezone}
+                      onChange={(e) =>
+                        setAccount({ ...account, timezone: e.target.value })
+                      }
+                      className="flex h-10 w-full rounded-md border border-border bg-input px-3 py-2 text-body text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+                    >
+                      <option value="America/Argentina/Buenos_Aires">
+                        Buenos Aires (GMT-3)
+                      </option>
+                      <option value="America/Mexico_City">
+                        Ciudad de México (GMT-6)
+                      </option>
+                      <option value="Europe/Madrid">Madrid (GMT+1)</option>
+                      <option value="UTC">UTC</option>
+                    </select>
+                  </div>
+                </div>
+
+                <Separator />
+
+                <div className="flex justify-end gap-2">
+                  <Button variant="ghost">Cancelar</Button>
+                  <Button
+                    disabled={saving}
+                    onClick={() => handleSave(onSaveAccount, account)}
+                  >
+                    {saving ? 'Guardando...' : 'Guardar cambios'}
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          {/* ============ NOTIFICACIONES ============ */}
+          <TabsContent value="notifications">
+            <Card>
+              <CardHeader>
+                <CardTitle>Notificaciones</CardTitle>
+                <CardDescription>
+                  Elegí qué notificaciones querés recibir.
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-6">
+                <div className="space-y-4">
+                  <h4 className="text-small font-semibold uppercase tracking-wider text-muted-foreground">
+                    Por correo
+                  </h4>
+                  {[
+                    {
+                      key: 'emailProduct',
+                      label: 'Novedades del producto',
+                      desc: 'Lanzamientos y nuevas funciones.',
+                    },
+                    {
+                      key: 'emailSecurity',
+                      label: 'Alertas de seguridad',
+                      desc: 'Inicios de sesión y cambios importantes.',
+                    },
+                    {
+                      key: 'emailMarketing',
+                      label: 'Promociones',
+                      desc: 'Descuentos y ofertas especiales.',
+                    },
+                  ].map((item) => (
+                    <div
+                      key={item.key}
+                      className="flex items-center justify-between gap-4 py-1"
+                    >
+                      <div className="space-y-0.5">
+                        <Label className="cursor-pointer">{item.label}</Label>
+                        <p className="text-caption text-muted-foreground">
+                          {item.desc}
+                        </p>
+                      </div>
+                      <Switch
+                        checked={notifications[item.key]}
+                        onCheckedChange={(v) =>
+                          setNotifications({ ...notifications, [item.key]: v })
+                        }
+                      />
+                    </div>
+                  ))}
+                </div>
+
+                <Separator />
+
+                <div className="space-y-4">
+                  <h4 className="text-small font-semibold uppercase tracking-wider text-muted-foreground">
+                    Push
+                  </h4>
+                  {[
+                    {
+                      key: 'pushProduct',
+                      label: 'Novedades del producto',
+                      desc: 'Notificaciones del navegador.',
+                    },
+                    {
+                      key: 'pushSecurity',
+                      label: 'Alertas de seguridad',
+                      desc: 'Recomendado mantener activo.',
+                    },
+                  ].map((item) => (
+                    <div
+                      key={item.key}
+                      className="flex items-center justify-between gap-4 py-1"
+                    >
+                      <div className="space-y-0.5">
+                        <Label className="cursor-pointer">{item.label}</Label>
+                        <p className="text-caption text-muted-foreground">
+                          {item.desc}
+                        </p>
+                      </div>
+                      <Switch
+                        checked={notifications[item.key]}
+                        onCheckedChange={(v) =>
+                          setNotifications({ ...notifications, [item.key]: v })
+                        }
+                      />
+                    </div>
+                  ))}
+                </div>
+
+                <Separator />
+
+                <div className="flex justify-end gap-2">
+                  <Button
+                    disabled={saving}
+                    onClick={() => handleSave(onSaveNotifications, notifications)}
+                  >
+                    {saving ? 'Guardando...' : 'Guardar cambios'}
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          {/* ============ SEGURIDAD ============ */}
+          <TabsContent value="security" className="space-y-6">
+            <Card>
+              <CardHeader>
+                <CardTitle>Cambiar contraseña</CardTitle>
+                <CardDescription>
+                  Te recomendamos usar una contraseña fuerte y única.
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-5">
+                <div className="space-y-1.5">
+                  <Label htmlFor="current-password">Contraseña actual</Label>
+                  <Input id="current-password" type="password" />
+                </div>
+                <div className="space-y-1.5">
+                  <Label htmlFor="new-password">Nueva contraseña</Label>
+                  <Input id="new-password" type="password" />
+                </div>
+                <div className="space-y-1.5">
+                  <Label htmlFor="confirm-password">Confirmar contraseña</Label>
+                  <Input id="confirm-password" type="password" />
+                </div>
+                <div className="flex justify-end">
+                  <Button onClick={onChangePassword}>
+                    Actualizar contraseña
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card className="border-destructive/40">
+              <CardHeader>
+                <CardTitle className="text-destructive">
+                  Zona de peligro
+                </CardTitle>
+                <CardDescription>
+                  Acciones irreversibles sobre tu cuenta.
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="flex flex-wrap items-center justify-between gap-4">
+                  <div className="space-y-1">
+                    <p className="text-small font-medium">
+                      Eliminar cuenta permanentemente
+                    </p>
+                    <p className="text-caption text-muted-foreground">
+                      Se eliminarán todos tus datos. Esta acción no se puede deshacer.
+                    </p>
+                  </div>
+                  <Button variant="destructive" onClick={onDeleteAccount}>
+                    Eliminar cuenta
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          </TabsContent>
+        </Tabs>
+      </div>
+    </DashboardLayout>
+  );
+}