create-snapify-app 0.0.0-stage → 1.1.0

package/template/src/admin/pages/ModuleDetailPage.tsx

@@ -0,0 +1,293 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import { useCallback, useMemo, useState, type ReactNode } from 'react';
+import { Link, useNavigate, useParams } from 'react-router-dom';
+import { Activity, BadgeCheck, KeyRound, ShieldAlert, ShieldCheck, SlidersHorizontal, Trash2 } from 'lucide-react';
+import { toast } from 'sonner';
+import type { InstalledModuleDetail, InstalledModuleInfo } from '../../../server/modules/types';
+import { useAuth } from '../context/AuthContext';
+import { api, ApiError } from '../lib/api';
+import { errorMessage, useAsync, useEditable } from '../lib/hooks';
+import { fmtDate, fmtDateTime } from '../lib/format';
+import { Alert, Badge, Button, Card, EmptyState, ErrorState, Field, PageHeader, PageSkeleton, StatCard, Switch, Textarea } from '../ui/primitives';
+import { Modal, useConfirm } from '../ui/overlays';
+import { SaveBar } from '../ui/SaveBar';
+import { SettingsForm } from '../modules/SettingsForm';
+import { ModuleIcon, ModuleStatusBadge, notifyModulesChanged, PermissionList, PRICING_LABEL } from '../modules/labels';
+
+type Settings = Record<string, unknown>;
+
+function InfoRow({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className="flex items-start justify-between gap-4 py-1.5 text-sm">
+      <span className="text-slate-500">{label}</span>
+      <span className="text-right font-medium text-slate-800">{children}</span>
+    </div>
+  );
+}
+
+function SideCard({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <Card>
+      <p className="mb-3 text-xs font-semibold uppercase tracking-wide text-slate-500">{title}</p>
+      {children}
+    </Card>
+  );
+}
+
+function LicenseModal({ module, open, onClose, onSaved }: { module: InstalledModuleDetail; open: boolean; onClose: () => void; onSaved: (m: InstalledModuleInfo) => void }) {
+  const [key, setKey] = useState('');
+  const [busy, setBusy] = useState(false);
+  const submit = async () => {
+    setBusy(true);
+    try {
+      const m = await api.modules.setLicense(module.id, key.trim());
+      toast.success('Licence vérifiée et enregistrée');
+      onSaved(m);
+      setKey('');
+      onClose();
+    } catch (e) {
+      toast.error(errorMessage(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title="Clé de licence"
+      description={`Collez la clé fournie par NOVALABS pour « ${module.name} ». Elle est vérifiée localement : signature, module, domaine et date d’expiration.`}
+      footer={
+        <>
+          <Button onClick={onClose}>Annuler</Button>
+          <Button variant="primary" loading={busy} disabled={!key.trim().startsWith('SNAPIFY-LIC-')} onClick={submit}>
+            Vérifier et enregistrer
+          </Button>
+        </>
+      }
+    >
+      <Field label="Clé" hint="Commence par SNAPIFY-LIC-">
+        <Textarea value={key} onChange={(e) => setKey(e.target.value)} rows={5} className="font-mono text-xs" placeholder="SNAPIFY-LIC-…" />
+      </Field>
+    </Modal>
+  );
+}
+
+export default function ModuleDetailPage() {
+  const { id = '' } = useParams();
+  const navigate = useNavigate();
+  const confirm = useConfirm();
+  const { can } = useAuth();
+  const isSuper = can('modules.manage');
+  const canEdit = can('modules.settings');
+  const { data, setData, error, loading, reload } = useAsync(() => api.modules.detail(id), [id]);
+  const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({});
+  const [licenseOpen, setLicenseOpen] = useState(false);
+  const [toggling, setToggling] = useState(false);
+
+  const initial = useMemo(() => data?.settings ?? null, [data?.settings]);
+  const save = useCallback(
+    async (value: Settings) => {
+      try {
+        const r = await api.modules.saveSettings(id, value);
+        setFieldErrors({});
+        return r.settings;
+      } catch (e) {
+        if (e instanceof ApiError && e.fields) setFieldErrors(e.fields);
+        throw e;
+      }
+    },
+    [id]
+  );
+  const ed = useEditable<Settings>(initial, save, { successMessage: 'Réglages du module enregistrés' });
+
+  if (loading && !data) return <PageSkeleton />;
+  if (error && !data) return <ErrorState message={error} onRetry={reload} />;
+  if (!data) return null;
+  const m = data;
+
+  const merge = (info: InstalledModuleInfo) => {
+    setData({ ...m, ...info });
+    notifyModulesChanged();
+  };
+
+  const toggle = async (enabled: boolean) => {
+    setToggling(true);
+    try {
+      merge(await api.modules.setEnabled(m.id, enabled));
+      toast.success(enabled ? 'Module activé' : 'Module désactivé');
+    } catch (e) {
+      toast.error(errorMessage(e));
+    } finally {
+      setToggling(false);
+    }
+  };
+
+  const uninstall = async () => {
+    const ok = await confirm({
+      title: `Désinstaller « ${m.name} » ?`,
+      message: 'Le module disparaîtra du site et ses réglages ainsi que ses données seront supprimés. Vous pourrez le réinstaller depuis la marketplace.',
+      confirmLabel: 'Désinstaller',
+      danger: true,
+    });
+    if (!ok) return;
+    try {
+      await api.modules.uninstall(m.id);
+      notifyModulesChanged();
+      toast.success(`${m.name} désinstallé`);
+      navigate('/modules');
+    } catch (e) {
+      toast.error(errorMessage(e));
+    }
+  };
+
+  const statusTone = m.status.code === 'disabled' ? 'info' : m.status.code.startsWith('license') ? 'warning' : 'danger';
+  const report = m.report;
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        breadcrumb={
+          <Link to="/modules" className="hover:text-slate-800">
+            Modules installés
+          </Link>
+        }
+        title={
+          <span className="flex items-center gap-3">
+            <ModuleIcon name={m.icon} className="h-9 w-9" />
+            {m.name}
+            <ModuleStatusBadge code={m.status.code} />
+          </span>
+        }
+        description={m.description}
+        actions={
+          isSuper ? (
+            <>
+              <Switch checked={m.enabled} disabled={toggling} onChange={(v) => void toggle(v)} label={m.enabled ? 'Activé' : 'Désactivé'} />
+              <Button variant="ghost" icon={Trash2} className="text-rose-600 hover:bg-rose-50" onClick={() => void uninstall()}>
+                Désinstaller
+              </Button>
+            </>
+          ) : null
+        }
+      />
+
+      {m.status.code !== 'active' ? (
+        <Alert
+          tone={statusTone}
+          icon={statusTone === 'info' ? undefined : ShieldAlert}
+          action={
+            m.status.code.startsWith('license') && isSuper ? (
+              <Button size="sm" icon={KeyRound} onClick={() => setLicenseOpen(true)}>
+                Saisir une licence
+              </Button>
+            ) : undefined
+          }
+        >
+          {m.status.message}
+        </Alert>
+      ) : null}
+
+      {report?.alerts?.map((a, i) => (
+        <Alert key={i} tone={a.tone} title={a.title}>
+          {a.text}
+        </Alert>
+      ))}
+      {report?.stats?.length ? (
+        <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+          {report.stats.map((s) => (
+            <StatCard key={s.label} label={s.label} value={s.value} hint={s.hint} icon={Activity} />
+          ))}
+        </div>
+      ) : null}
+
+      <div className="grid gap-6 xl:grid-cols-[1fr_340px]">
+        <div className="min-w-0">
+          {m.settingsSchema.length && ed.value ? (
+            <fieldset disabled={!canEdit} className="min-w-0">
+              <SettingsForm fields={m.settingsSchema} value={ed.value} errors={fieldErrors} onChange={(p) => ed.patch(p)} />
+            </fieldset>
+          ) : (
+            <EmptyState icon={SlidersHorizontal} title="Aucun réglage" description="Ce module fonctionne sans configuration." />
+          )}
+        </div>
+
+        <div className="space-y-4 xl:sticky xl:top-20 xl:self-start">
+          <SideCard title="Licence">
+            <p className={`flex items-start gap-2 text-sm ${m.license.state === 'valid' ? 'text-emerald-700' : 'text-amber-700'}`}>
+              {m.license.state === 'valid' ? <BadgeCheck className="mt-0.5 h-4 w-4 shrink-0" /> : <KeyRound className="mt-0.5 h-4 w-4 shrink-0" />}
+              {m.license.message}
+            </p>
+            {m.license.licenseId ? (
+              <div className="mt-3 divide-y divide-slate-100">
+                <InfoRow label="Titulaire">{m.license.licensee}</InfoRow>
+                <InfoRow label="Formule">{m.license.plan}</InfoRow>
+                <InfoRow label="Domaines">{m.license.domains?.includes('*') ? 'Tous' : m.license.domains?.join(', ')}</InfoRow>
+                <InfoRow label="Expiration">{m.license.expiresAt ? fmtDate(m.license.expiresAt) : 'Jamais'}</InfoRow>
+                <InfoRow label="Référence">
+                  <span className="font-mono text-xs">{m.license.licenseId}</span>
+                </InfoRow>
+              </div>
+            ) : null}
+            {isSuper ? (
+              <Button size="sm" className="mt-3 w-full" icon={KeyRound} onClick={() => setLicenseOpen(true)}>
+                {m.license.licenseId ? 'Remplacer la licence' : 'Saisir une licence'}
+              </Button>
+            ) : null}
+          </SideCard>
+
+          <SideCard title="Sécurité">
+            {m.signature.valid ? (
+              <p className="flex items-start gap-2 text-sm text-emerald-700">
+                <ShieldCheck className="mt-0.5 h-4 w-4 shrink-0" /> Signé par NOVALABS (clé {m.signature.kid}). Les fichiers sont contrôlés à chaque démarrage.
+              </p>
+            ) : (
+              <p className="flex items-start gap-2 text-sm text-amber-700">
+                <ShieldAlert className="mt-0.5 h-4 w-4 shrink-0" />
+                {m.signature.devUnsigned ? 'Module non signé, chargé uniquement en mode développeur.' : 'Signature invalide : le module est bloqué.'}
+              </p>
+            )}
+            <p className="mb-2 mt-4 text-xs font-medium text-slate-500">Permissions accordées</p>
+            <PermissionList permissions={m.permissions} hasServer={m.hasServer} />
+          </SideCard>
+
+          <SideCard title="Informations">
+            <div className="divide-y divide-slate-100">
+              <InfoRow label="Version">{m.version}</InfoRow>
+              <InfoRow label="Éditeur">
+                {m.author.url ? (
+                  <a href={m.author.url} target="_blank" rel="noreferrer" className="text-brand-700 hover:underline">
+                    {m.author.name}
+                  </a>
+                ) : (
+                  m.author.name
+                )}
+              </InfoRow>
+              <InfoRow label="Tarif">
+                <Badge tone={m.pricing === 'free' ? 'success' : 'brand'}>{PRICING_LABEL[m.pricing]}</Badge>
+              </InfoRow>
+              <InfoRow label="Catégorie">{m.category}</InfoRow>
+              <InfoRow label="Identifiant">
+                <span className="font-mono text-xs">{m.id}</span>
+              </InfoRow>
+              <InfoRow label="Provenance">{m.source === 'marketplace' ? 'Marketplace' : 'Import manuel'}</InfoRow>
+              <InfoRow label="Installé le">{fmtDateTime(m.installedAt)}</InfoRow>
+              <InfoRow label="Mis à jour le">{fmtDateTime(m.updatedAt)}</InfoRow>
+            </div>
+          </SideCard>
+        </div>
+      </div>
+
+      <LicenseModal module={m} open={licenseOpen} onClose={() => setLicenseOpen(false)} onSaved={() => {
+          void reload();
+          notifyModulesChanged();
+        }} />
+      <SaveBar dirty={ed.dirty} saving={ed.saving} onSave={ed.commit} onReset={ed.reset} blocker={ed.blocker} />
+    </div>
+  );
+}

package/template/src/admin/pages/ModulesPage.tsx

@@ -0,0 +1,135 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { FlaskConical, Puzzle, Settings2, ShieldAlert, ShieldCheck, Store } from 'lucide-react';
+import { toast } from 'sonner';
+import type { InstalledModuleInfo } from '../../../server/modules/types';
+import { useAuth } from '../context/AuthContext';
+import { api } from '../lib/api';
+import { errorMessage, useAsync } from '../lib/hooks';
+import { fmtDate } from '../lib/format';
+import { Alert, Button, Card, EmptyState, ErrorState, PageHeader, PageSkeleton, Switch } from '../ui/primitives';
+import { ImportPackageButton } from '../modules/InstallDialog';
+import { ModuleIcon, ModuleStatusBadge, notifyModulesChanged } from '../modules/labels';
+
+function ModuleRow({ m, canManage, onChange }: { m: InstalledModuleInfo; canManage: boolean; onChange: (m: InstalledModuleInfo) => void }) {
+  const [busy, setBusy] = useState(false);
+  const toggle = async (enabled: boolean) => {
+    setBusy(true);
+    try {
+      onChange(await api.modules.setEnabled(m.id, enabled));
+      notifyModulesChanged();
+      toast.success(enabled ? `${m.name} activé` : `${m.name} désactivé`);
+    } catch (e) {
+      toast.error(errorMessage(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Card className="flex flex-col gap-4 md:flex-row md:items-center">
+      <div className="flex min-w-0 flex-1 items-start gap-3">
+        <ModuleIcon name={m.icon} />
+        <div className="min-w-0">
+          <p className="flex flex-wrap items-center gap-2 text-[15px] font-semibold text-slate-900">
+            <Link to={`/modules/${m.id}`} className="hover:text-brand-700">
+              {m.name}
+            </Link>
+            <span className="text-xs font-normal text-slate-400">v{m.version}</span>
+            <ModuleStatusBadge code={m.status.code} />
+          </p>
+          <p className="mt-0.5 line-clamp-1 text-sm text-slate-500">{m.description}</p>
+          <p className="mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-slate-500">
+            {m.signature.valid ? (
+              <span className="inline-flex items-center gap-1 text-emerald-700">
+                <ShieldCheck className="h-3.5 w-3.5" /> Signature vérifiée
+              </span>
+            ) : (
+              <span className="inline-flex items-center gap-1 text-amber-700">
+                <ShieldAlert className="h-3.5 w-3.5" /> {m.signature.devUnsigned ? 'Non signé (mode développeur)' : 'Signature invalide'}
+              </span>
+            )}
+            <span>{m.license.message}</span>
+            <span>Installé le {fmtDate(m.installedAt)}</span>
+          </p>
+          {m.status.code !== 'active' && m.status.code !== 'disabled' ? <p className="mt-1.5 text-xs text-rose-700">{m.status.message}</p> : null}
+        </div>
+      </div>
+      <div className="flex shrink-0 items-center gap-3">
+        <Switch checked={m.enabled} onChange={(v) => void toggle(v)} disabled={!canManage || busy} label={m.enabled ? 'Activé' : 'Désactivé'} />
+        <Link to={`/modules/${m.id}`}>
+          <Button size="sm" icon={Settings2}>
+            {m.hasSettings ? 'Configurer' : 'Détails'}
+          </Button>
+        </Link>
+      </div>
+    </Card>
+  );
+}
+
+export default function ModulesPage() {
+  const { can } = useAuth();
+  const navigate = useNavigate();
+  const isSuper = can('modules.manage');
+  const { data, setData, error, loading, reload } = useAsync(() => api.modules.list(), []);
+
+  if (loading && !data) return <PageSkeleton />;
+  if (error && !data) return <ErrorState message={error} onRetry={reload} />;
+  if (!data) return null;
+
+  const replace = (m: InstalledModuleInfo) => setData({ ...data, modules: data.modules.map((x) => (x.id === m.id ? m : x)) });
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title="Modules installés"
+        description="Activez, configurez ou retirez les modules de votre site. L’intégrité de chaque module est contrôlée à chaque démarrage du serveur."
+        actions={
+          isSuper ? (
+            <>
+              <ImportPackageButton onInstalled={(m) => navigate(`/modules/${m.id}`)} />
+              <Link to="/marketplace">
+                <Button variant="primary" icon={Store}>
+                  Marketplace
+                </Button>
+              </Link>
+            </>
+          ) : null
+        }
+      />
+      {data.devMode ? (
+        <Alert tone="warning" icon={FlaskConical} title="Mode développeur actif">
+          Les modules non signés sont acceptés. Ne laissez pas ce mode activé en production.
+        </Alert>
+      ) : null}
+      {data.modules.length === 0 ? (
+        <EmptyState
+          icon={Puzzle}
+          title="Aucun module installé"
+          description="Parcourez la marketplace pour ajouter des fonctionnalités à votre site."
+          action={
+            isSuper ? (
+              <Link to="/marketplace">
+                <Button variant="primary" icon={Store}>
+                  Ouvrir la marketplace
+                </Button>
+              </Link>
+            ) : undefined
+          }
+        />
+      ) : (
+        <div className="space-y-3">
+          {data.modules.map((m) => (
+            <ModuleRow key={m.id} m={m} canManage={isSuper} onChange={replace} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/template/src/admin/pages/NewsletterPage.tsx

@@ -0,0 +1,193 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import React, { useCallback, useMemo, useState } from 'react';
+import { toast } from 'sonner';
+import { CheckCircle2, Clock, Download, Mail, MoreHorizontal, Search, Trash2, UserCheck, UserX } from 'lucide-react';
+import type { NewsletterConfig, NewsletterSubscriber } from '../../../server/cms/types';
+import { api } from '../lib/api';
+import { errorMessage, useAsync, useEditable } from '../lib/hooks';
+import { downloadCsv, fmtDateTime, fmtNumber } from '../lib/format';
+import { useSite, useSiteData } from '../context/SiteContext';
+import { Alert, Button, Card, EmptyState, Field, Input, PageHeader, PageSkeleton, Section, Segmented, StatCard, StatusBadge, Switch, Table, Td, Th } from '../ui/primitives';
+import { Dropdown, DropdownItem, useConfirm } from '../ui/overlays';
+import { Pagination, usePagination } from '../ui/Pagination';
+import { SaveBar } from '../ui/SaveBar';
+
+type Sub = Omit<NewsletterSubscriber, 'confirmToken'>;
+
+export default function NewsletterPage() {
+  const site = useSiteData();
+  const { patchSite } = useSite();
+  const confirm = useConfirm();
+  const { data, setData, loading } = useAsync(() => api.subscribers(), []);
+  const [q, setQ] = useState('');
+  const [status, setStatus] = useState<'all' | Sub['status']>('all');
+
+  const save = useCallback(
+    async (n: NewsletterConfig) => {
+      await api.saveSection('newsletter', n);
+      patchSite('newsletter', n);
+    },
+    [patchSite]
+  );
+  const ed = useEditable<NewsletterConfig>(site.newsletter, save, { successMessage: 'Réglages de la newsletter enregistrés' });
+
+  const subs = data || [];
+  const count = (s: Sub['status']) => subs.filter((x) => x.status === s).length;
+  const rows = useMemo(
+    () => subs.filter((s) => status === 'all' || s.status === status).filter((s) => !q || s.email.toLowerCase().includes(q.toLowerCase())),
+    [subs, status, q]
+  );
+  const pg = usePagination(rows, 'newsletter', { resetKey: [q, status] });
+
+  const setSubStatus = async (s: Sub, next: Sub['status']) => {
+    try {
+      await api.setSubscriberStatus(s.id, next);
+      setData((d) => (d || []).map((x) => (x.id === s.id ? { ...x, status: next } : x)));
+      toast.success('Statut mis à jour');
+    } catch (e) {
+      toast.error(errorMessage(e));
+    }
+  };
+  const remove = async (s: Sub) => {
+    if (!(await confirm({ title: 'Supprimer cet abonné ?', message: `${s.email} sera définitivement effacé (droit à l’oubli RGPD).`, confirmLabel: 'Supprimer', danger: true }))) return;
+    try {
+      await api.deleteSubscriber(s.id);
+      setData((d) => (d || []).filter((x) => x.id !== s.id));
+      toast.success('Abonné supprimé');
+    } catch (e) {
+      toast.error(errorMessage(e));
+    }
+  };
+
+  if (!ed.value) return null;
+  const n = ed.value;
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title="Newsletter"
+        description="Inscriptions recueillies depuis le pied de page du site."
+        actions={
+          <Button
+            icon={Download}
+            disabled={!subs.length}
+            onClick={() =>
+              downloadCsv('abonnes-newsletter.csv', [
+                ['E-mail', 'Statut', 'Source', 'Inscrit le', 'Confirmé le'],
+                ...rows.map((s) => [s.email, s.status, s.source, fmtDateTime(s.createdAt), fmtDateTime(s.confirmedAt)]),
+              ])
+            }
+          >
+            Exporter (CSV)
+          </Button>
+        }
+      />
+
+      <div className="grid gap-4 sm:grid-cols-3">
+        <StatCard label="Abonnés actifs" value={fmtNumber(count('active'))} icon={UserCheck} />
+        <StatCard label="En attente de confirmation" value={fmtNumber(count('pending'))} icon={Clock} tone="amber" />
+        <StatCard label="Désinscrits" value={fmtNumber(count('unsubscribed'))} icon={UserX} tone="rose" />
+      </div>
+
+      <div className="grid gap-6 xl:grid-cols-[1fr_380px]">
+        <Card padded={false}>
+          <div className="flex flex-col gap-3 border-b border-slate-100 p-4 sm:flex-row sm:items-center sm:justify-between">
+            <Segmented
+              value={status}
+              onChange={setStatus}
+              options={[
+                { value: 'all', label: 'Tous' },
+                { value: 'active', label: 'Actifs' },
+                { value: 'pending', label: 'En attente' },
+                { value: 'unsubscribed', label: 'Désinscrits' },
+              ]}
+            />
+            <div className="relative sm:w-64">
+              <Search className="pointer-events-none absolute left-3 top-2.5 h-4 w-4 text-slate-400" />
+              <Input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Rechercher un e-mail…" className="pl-9" />
+            </div>
+          </div>
+          {loading && !data ? (
+            <div className="p-5">
+              <PageSkeleton />
+            </div>
+          ) : rows.length === 0 ? (
+            <EmptyState icon={Mail} title="Aucun abonné" description={n.enabled ? 'Les inscriptions apparaîtront ici.' : 'Activez la newsletter pour afficher le formulaire d’inscription sur le site.'} />
+          ) : (
+            <Table>
+              <thead>
+                <tr>
+                  <Th>E-mail</Th>
+                  <Th>Statut</Th>
+                  <Th>Inscription</Th>
+                  <Th className="w-12" />
+                </tr>
+              </thead>
+              <tbody>
+                {pg.pageItems.map((s) => (
+                  <tr key={s.id} className="hover:bg-slate-50/60">
+                    <Td className="font-medium text-slate-800">{s.email}</Td>
+                    <Td>
+                      <StatusBadge status={s.status} />
+                    </Td>
+                    <Td className="whitespace-nowrap text-slate-500">{fmtDateTime(s.createdAt)}</Td>
+                    <Td>
+                      <Dropdown
+                        trigger={
+                          <Button size="icon" variant="ghost" aria-label="Actions">
+                            <MoreHorizontal className="h-4 w-4" />
+                          </Button>
+                        }
+                      >
+                        {s.status !== 'active' ? (
+                          <DropdownItem icon={CheckCircle2} onClick={() => void setSubStatus(s, 'active')}>
+                            Marquer comme actif
+                          </DropdownItem>
+                        ) : null}
+                        {s.status !== 'unsubscribed' ? (
+                          <DropdownItem icon={UserX} onClick={() => void setSubStatus(s, 'unsubscribed')}>
+                            Désinscrire
+                          </DropdownItem>
+                        ) : null}
+                        <DropdownItem icon={Trash2} danger onClick={() => void remove(s)}>
+                          Supprimer définitivement
+                        </DropdownItem>
+                      </Dropdown>
+                    </Td>
+                  </tr>
+                ))}
+              </tbody>
+            </Table>
+          )}
+          <Pagination {...pg.props} noun="abonnés" />
+        </Card>
+
+        <div className="space-y-6">
+          <Section title="Réglages">
+            <Switch checked={n.enabled} onChange={(enabled) => ed.patch({ enabled })} label="Formulaire d’inscription actif" description="Affiche le bloc newsletter dans le pied de page." />
+            <Switch
+              checked={n.doubleOptIn}
+              onChange={(doubleOptIn) => ed.patch({ doubleOptIn })}
+              label="Double confirmation (recommandé)"
+              description="L’abonné confirme son adresse par un lien envoyé par e-mail. Conforme au RGPD."
+            />
+            {n.doubleOptIn ? (
+              <Field label="Objet de l’e-mail de confirmation">
+                <Input value={n.welcomeEmailSubject || ''} onChange={(e) => ed.patch({ welcomeEmailSubject: e.target.value })} placeholder="Confirmez votre inscription à la newsletter Snapify" />
+              </Field>
+            ) : null}
+          </Section>
+          <Alert tone="info">
+            Pour vos campagnes, exportez la liste des abonnés actifs au format CSV et importez-la dans votre outil d’e-mailing (Brevo, Mailchimp…).
+          </Alert>
+        </div>
+      </div>
+      <SaveBar dirty={ed.dirty} saving={ed.saving} onSave={ed.commit} onReset={ed.reset} blocker={ed.blocker} />
+    </div>
+  );
+}