@imansi/templates 0.1.0

package/src/dashboard/NotificationsPage.jsx

@@ -0,0 +1,230 @@
+import { useState } from 'react';
+import {
+  Avatar,
+  AvatarFallback,
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  cn,
+} from '@imansi/ui';
+import { DashboardLayout } from '../layouts/DashboardLayout.jsx';
+
+export function NotificationsPage({
+  brandName,
+  brandLogo,
+  navSections,
+  user,
+  userMenuItems,
+  notificationsCount,
+  onLogout,
+
+  title = 'Notificaciones',
+  subtitle = 'Todas tus notificaciones en un solo lugar.',
+  markAllText = 'Marcar todas como leídas',
+
+  notifications = [],
+  // [{ id, type: 'message'|'system'|'mention'|'success'|'warning',
+  //    user?: { name, avatar }, title, description, time, read, href }]
+
+  tabs = [
+    { value: 'all', label: 'Todas' },
+    { value: 'unread', label: 'Sin leer' },
+    { value: 'mentions', label: 'Menciones' },
+  ],
+
+  emptyMessage = 'No tenés notificaciones.',
+
+  onMarkAll,
+  onMarkRead,
+  onNotificationClick,
+}) {
+  const [tab, setTab] = useState('all');
+
+  const filtered = notifications.filter((n) => {
+    if (tab === 'unread') return !n.read;
+    if (tab === 'mentions') return n.type === 'mention';
+    return true;
+  });
+
+  const unreadCount = notifications.filter((n) => !n.read).length;
+
+  const typeIcons = {
+    message: {
+      color: 'bg-info/10 text-info',
+      icon: (
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+        </svg>
+      ),
+    },
+    system: {
+      color: 'bg-muted text-muted-foreground',
+      icon: (
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <circle cx="12" cy="12" r="10" />
+          <line x1="12" y1="16" x2="12" y2="12" />
+          <line x1="12" y1="8" x2="12.01" y2="8" />
+        </svg>
+      ),
+    },
+    mention: {
+      color: 'bg-primary/10 text-primary',
+      icon: <span className="text-body font-bold">@</span>,
+    },
+    success: {
+      color: 'bg-success/10 text-success',
+      icon: (
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+          <polyline points="4,12 10,18 20,6" />
+        </svg>
+      ),
+    },
+    warning: {
+      color: 'bg-warning/10 text-warning',
+      icon: (
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+          <line x1="12" y1="9" x2="12" y2="13" />
+          <line x1="12" y1="17" x2="12.01" y2="17" />
+        </svg>
+      ),
+    },
+  };
+
+  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="flex flex-wrap items-start justify-between gap-4">
+          <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>
+          {unreadCount > 0 && onMarkAll && (
+            <Button variant="outline" size="sm" onClick={onMarkAll}>
+              {markAllText}
+            </Button>
+          )}
+        </div>
+
+        {/* Tabs */}
+        <Tabs value={tab} onValueChange={setTab}>
+          <TabsList>
+            {tabs.map((t) => {
+              const count =
+                t.value === 'all'
+                  ? notifications.length
+                  : t.value === 'unread'
+                  ? unreadCount
+                  : notifications.filter((n) => n.type === 'mention').length;
+              return (
+                <TabsTrigger key={t.value} value={t.value}>
+                  {t.label}
+                  <span className="ml-1.5 text-caption text-muted-foreground">
+                    {count}
+                  </span>
+                </TabsTrigger>
+              );
+            })}
+          </TabsList>
+        </Tabs>
+
+        {/* Lista */}
+        <Card>
+          <CardContent className="p-0">
+            {filtered.length > 0 ? (
+              <ul className="divide-y divide-border">
+                {filtered.map((n) => {
+                  const typeInfo = typeIcons[n.type] || typeIcons.system;
+                  return (
+                    <li key={n.id}>
+                      <button
+                        onClick={() => {
+                          onMarkRead?.(n.id);
+                          onNotificationClick?.(n);
+                        }}
+                        className={cn(
+                          'w-full flex items-start gap-4 p-4 text-left transition-colors hover:bg-muted/50',
+                          !n.read && 'bg-primary/[0.03]'
+                        )}
+                      >
+                        {/* Icono de tipo */}
+                        <div
+                          className={cn(
+                            'flex h-10 w-10 shrink-0 items-center justify-center rounded-full',
+                            typeInfo.color
+                          )}
+                        >
+                          {typeInfo.icon}
+                        </div>
+
+                        {/* Contenido */}
+                        <div className="flex-1 min-w-0 space-y-1">
+                          <div className="flex items-start justify-between gap-3">
+                            <p className="text-small font-medium leading-snug">
+                              {n.title}
+                            </p>
+                            {!n.read && (
+                              <span className="shrink-0 mt-1.5 h-2 w-2 rounded-full bg-primary" />
+                            )}
+                          </div>
+                          {n.description && (
+                            <p className="text-caption text-muted-foreground leading-relaxed line-clamp-2">
+                              {n.description}
+                            </p>
+                          )}
+                          <div className="flex items-center gap-2 pt-1">
+                            {n.user && (
+                              <span className="flex items-center gap-1.5 text-caption text-muted-foreground">
+                                <Avatar size="xs">
+                                  {n.user.avatar ? (
+                                    <img src={n.user.avatar} alt="" />
+                                  ) : (
+                                    <AvatarFallback>
+                                      {n.user.name?.charAt(0) || 'U'}
+                                    </AvatarFallback>
+                                  )}
+                                </Avatar>
+                                {n.user.name}
+                              </span>
+                            )}
+                            <span className="text-caption text-muted-foreground">
+                              {n.time}
+                            </span>
+                          </div>
+                        </div>
+                      </button>
+                    </li>
+                  );
+                })}
+              </ul>
+            ) : (
+              <div className="text-center py-20 space-y-3">
+                <div className="inline-flex h-14 w-14 items-center justify-center rounded-full bg-muted text-muted-foreground">
+                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
+                    <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
+                  </svg>
+                </div>
+                <p className="text-small text-muted-foreground">{emptyMessage}</p>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </DashboardLayout>
+  );
+}

package/src/dashboard/ProfilePage.jsx

@@ -0,0 +1,272 @@
+import { useState } from 'react';
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Input,
+  Label,
+  Separator,
+  Textarea,
+} from '@imansi/ui';
+import { DashboardLayout } from '../layouts/DashboardLayout.jsx';
+
+export function ProfilePage({
+  brandName,
+  brandLogo,
+  navSections,
+  user,
+  userMenuItems,
+  notificationsCount,
+  onLogout,
+
+  title = 'Mi perfil',
+  subtitle = 'Así te ven otros usuarios en la plataforma.',
+
+  profile,
+  // { name, email, role, avatar, bio, company, website, location }
+
+  stats = [],
+  // [{ label, value }]
+
+  onSave,
+  onUploadAvatar,
+  onChangePasswordHref = '#',
+}) {
+  const [saving, setSaving] = useState(false);
+  const [form, setForm] = useState({
+    name: profile?.name || user?.name || '',
+    email: profile?.email || user?.email || '',
+    bio: profile?.bio || '',
+    company: profile?.company || '',
+    website: profile?.website || '',
+    location: profile?.location || '',
+  });
+
+  async function handleSave() {
+    if (!onSave) return;
+    setSaving(true);
+    await onSave(form);
+    setSaving(false);
+  }
+
+  const displayName = form.name || user?.name || 'Usuario';
+
+  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-5xl 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>
+
+        <div className="grid gap-6 lg:grid-cols-[1fr_320px]">
+          {/* Formulario principal */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Información personal</CardTitle>
+              <CardDescription>
+                Actualizá tus datos y foto de perfil.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              {/* Avatar */}
+              <div className="flex flex-wrap items-center gap-5">
+                <Avatar size="2xl">
+                  {profile?.avatar ? (
+                    <AvatarImage src={profile.avatar} alt={displayName} />
+                  ) : null}
+                  <AvatarFallback>
+                    {displayName.charAt(0).toUpperCase()}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="space-y-2">
+                  <div className="flex flex-wrap gap-2">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={onUploadAvatar}
+                    >
+                      Cambiar foto
+                    </Button>
+                    <Button variant="ghost" size="sm">
+                      Eliminar
+                    </Button>
+                  </div>
+                  <p className="text-caption text-muted-foreground">
+                    JPG, PNG o GIF. Máximo 2 MB.
+                  </p>
+                </div>
+              </div>
+
+              <Separator />
+
+              <div className="grid gap-5 sm:grid-cols-2">
+                <div className="space-y-1.5">
+                  <Label htmlFor="profile-name">Nombre</Label>
+                  <Input
+                    id="profile-name"
+                    value={form.name}
+                    onChange={(e) => setForm({ ...form, name: e.target.value })}
+                  />
+                </div>
+                <div className="space-y-1.5">
+                  <Label htmlFor="profile-email">Email</Label>
+                  <Input
+                    id="profile-email"
+                    type="email"
+                    value={form.email}
+                    onChange={(e) => setForm({ ...form, email: e.target.value })}
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-1.5">
+                <Label htmlFor="profile-bio">Biografía</Label>
+                <Textarea
+                  id="profile-bio"
+                  rows={3}
+                  placeholder="Contanos sobre vos..."
+                  value={form.bio}
+                  onChange={(e) => setForm({ ...form, bio: e.target.value })}
+                />
+              </div>
+
+              <div className="grid gap-5 sm:grid-cols-2">
+                <div className="space-y-1.5">
+                  <Label htmlFor="profile-company">Empresa</Label>
+                  <Input
+                    id="profile-company"
+                    value={form.company}
+                    onChange={(e) =>
+                      setForm({ ...form, company: e.target.value })
+                    }
+                  />
+                </div>
+                <div className="space-y-1.5">
+                  <Label htmlFor="profile-location">Ubicación</Label>
+                  <Input
+                    id="profile-location"
+                    value={form.location}
+                    onChange={(e) =>
+                      setForm({ ...form, location: e.target.value })
+                    }
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-1.5">
+                <Label htmlFor="profile-website">Sitio web</Label>
+                <Input
+                  id="profile-website"
+                  type="url"
+                  placeholder="https://..."
+                  value={form.website}
+                  onChange={(e) => setForm({ ...form, website: e.target.value })}
+                />
+              </div>
+
+              <Separator />
+
+              <div className="flex justify-end gap-2">
+                <Button variant="ghost">Cancelar</Button>
+                <Button disabled={saving} onClick={handleSave}>
+                  {saving ? 'Guardando...' : 'Guardar cambios'}
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Sidebar con info */}
+          <div className="space-y-6">
+            {/* Card de resumen */}
+            <Card>
+              <CardContent className="p-6 text-center space-y-3">
+                <Avatar size="xl" className="mx-auto">
+                  {profile?.avatar ? (
+                    <AvatarImage src={profile.avatar} alt={displayName} />
+                  ) : null}
+                  <AvatarFallback>
+                    {displayName.charAt(0).toUpperCase()}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="space-y-0.5">
+                  <p className="text-h4 font-semibold">{displayName}</p>
+                  {profile?.role && (
+                    <p className="text-caption text-muted-foreground">
+                      {profile.role}
+                    </p>
+                  )}
+                </div>
+                {stats.length > 0 && (
+                  <>
+                    <Separator />
+                    <div className="grid grid-cols-3 gap-2 pt-1">
+                      {stats.map((s, i) => (
+                        <div key={i} className="text-center">
+                          <p className="text-h4 font-bold text-foreground">
+                            {s.value}
+                          </p>
+                          <p className="text-caption text-muted-foreground">
+                            {s.label}
+                          </p>
+                        </div>
+                      ))}
+                    </div>
+                  </>
+                )}
+              </CardContent>
+            </Card>
+
+            {/* Card de seguridad */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-h4">Seguridad</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="flex items-center justify-between gap-3">
+                  <div className="space-y-0.5 min-w-0">
+                    <p className="text-small font-medium">Contraseña</p>
+                    <p className="text-caption text-muted-foreground">
+                      Última actualización: hace 3 meses
+                    </p>
+                  </div>
+                  <Button variant="outline" size="sm" asChild>
+                    <a href={onChangePasswordHref}>Cambiar</a>
+                  </Button>
+                </div>
+                <Separator />
+                <div className="flex items-center justify-between gap-3">
+                  <div className="space-y-0.5 min-w-0">
+                    <p className="text-small font-medium">2FA</p>
+                    <p className="text-caption text-muted-foreground">
+                      Autenticación en dos pasos
+                    </p>
+                  </div>
+                  <Button variant="outline" size="sm">
+                    Configurar
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </DashboardLayout>
+  );
+}