create-snapify-app 0.0.0-stage → 1.1.1

package/template/apps/superadmin/src/pages/SettingsPage.tsx

@@ -0,0 +1,199 @@
+/**
+ * Snapify Superadmin — Paramétrage global (SMTP + marketplace)
+ */
+import React, { useCallback, useEffect, useState } from 'react';
+import { Mail, Save, Settings2 } from 'lucide-react';
+import { useDtField } from '../../../shared/ui';
+import { Alert, Button, Field, Input, PageHeader, Section, Select, Switch } from '../../../../src/admin/ui/primitives';
+import { dt, sa } from '../lib/api';
+
+export function SettingsPage() {
+  const [mp, setMp] = useState({
+    commissionBps: 3000,
+    developerFeeMillimes: 100000,
+    flouciPublicKey: '',
+    flouciPrivateKey: '',
+    bankFallback: '',
+    hasFlouciPrivateKey: false,
+  });
+  const developerFee = useDtField(mp.developerFeeMillimes, (m) => setMp((f) => ({ ...f, developerFeeMillimes: m })));
+  const [smtp, setSmtp] = useState({
+    enabled: false,
+    host: '',
+    port: 587,
+    security: 'starttls',
+    username: '',
+    password: '',
+    fromName: 'Snapify',
+    fromEmail: '',
+    replyTo: '',
+    timeoutSec: 20,
+    allowSelfSigned: false,
+    hasPassword: false,
+  });
+  const [source, setSource] = useState('none');
+  const [testTo, setTestTo] = useState('contact@novalabs.tn');
+  const [msg, setMsg] = useState<{ tone: 'success' | 'danger' | 'warning'; text: string } | null>(null);
+  const [saving, setSaving] = useState('');
+
+  const load = useCallback(() => {
+    void sa<typeof mp>('/settings').then((s) => setMp((f) => ({ ...f, ...s, flouciPrivateKey: '' })));
+    void sa<{ smtp: typeof smtp; source: string }>('/mail-settings').then((d) => {
+      setSmtp((f) => ({ ...f, ...d.smtp, password: '' }));
+      setSource(d.source);
+    });
+  }, []);
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title="Paramétrage"
+        description="Commissions, Flouci, SMTP — tout le pilotage opérationnel de la plateforme."
+        actions={
+          <Button
+            variant="primary"
+            icon={Save}
+            loading={saving === 'all'}
+            onClick={async () => {
+              setSaving('all');
+              setMsg(null);
+              try {
+                const body: Record<string, unknown> = {
+                  commissionBps: mp.commissionBps,
+                  developerFeeMillimes: mp.developerFeeMillimes,
+                  flouciPublicKey: mp.flouciPublicKey,
+                  bankFallback: mp.bankFallback,
+                };
+                if (mp.flouciPrivateKey) body.flouciPrivateKey = mp.flouciPrivateKey;
+                await sa('/settings', { method: 'PUT', body: JSON.stringify(body) });
+                const smtpBody: Record<string, unknown> = { ...smtp };
+                delete smtpBody.hasPassword;
+                if (!smtp.password) delete smtpBody.password;
+                await sa('/mail-settings', { method: 'PUT', body: JSON.stringify({ smtp: smtpBody }) });
+                setMsg({ tone: 'success', text: 'Paramètres enregistrés.' });
+                load();
+              } catch (e) {
+                setMsg({ tone: 'danger', text: e instanceof Error ? e.message : 'Erreur' });
+              } finally {
+                setSaving('');
+              }
+            }}
+          >
+            Tout enregistrer
+          </Button>
+        }
+      />
+      {msg ? <Alert tone={msg.tone}>{msg.text}</Alert> : null}
+
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Section title="Marketplace" description="Commission et frais développeur.">
+          <Field label="Commission marketplace" hint="Part NOVALABS sur chaque vente.">
+            <Input
+              type="number"
+              prefix="%"
+              min={0}
+              max={90}
+              step={0.5}
+              value={mp.commissionBps / 100}
+              onChange={(e) => setMp({ ...mp, commissionBps: Math.round(Number(e.target.value) * 100) })}
+            />
+          </Field>
+          <Field label="Frais inscription développeur" hint={dt(mp.developerFeeMillimes)}>
+            <Input prefix="DT" {...developerFee} />
+          </Field>
+        </Section>
+
+        <Section title="Flouci" description="Clés marchand licences + marketplace.">
+          <Field label="Clé publique">
+            <Input value={mp.flouciPublicKey} onChange={(e) => setMp({ ...mp, flouciPublicKey: e.target.value })} className="font-mono" />
+          </Field>
+          <Field label="Clé privée" hint={mp.hasFlouciPrivateKey ? 'Déjà enregistrée — laissez vide pour conserver.' : 'Aucune clé.'}>
+            <Input type="password" value={mp.flouciPrivateKey} onChange={(e) => setMp({ ...mp, flouciPrivateKey: e.target.value })} autoComplete="new-password" />
+          </Field>
+          <Field label="IBAN / virement secours">
+            <Input value={mp.bankFallback} onChange={(e) => setMp({ ...mp, bankFallback: e.target.value })} />
+          </Field>
+        </Section>
+      </div>
+
+      <Section
+        title="SMTP / e-mails"
+        description={`Source active : ${source}. Relances, factures et newsletter passent par ici.`}
+        actions={<Settings2 className="h-4 w-4 text-slate-400" />}
+      >
+        <Switch checked={smtp.enabled} onChange={(v) => setSmtp({ ...smtp, enabled: v })} label="SMTP CMS activé" description="Sinon fallback .env si configuré." />
+        <div className="grid gap-3 md:grid-cols-2">
+          <Field label="Hôte">
+            <Input value={smtp.host} onChange={(e) => setSmtp({ ...smtp, host: e.target.value })} placeholder="mail.novalabs.tn" />
+          </Field>
+          <Field label="Port">
+            <Input type="number" value={smtp.port} onChange={(e) => setSmtp({ ...smtp, port: Number(e.target.value) || 587 })} />
+          </Field>
+          <Field label="Sécurité">
+            <Select
+              value={smtp.security}
+              onChange={(v) => setSmtp({ ...smtp, security: v })}
+              options={[
+                { value: 'starttls', label: 'STARTTLS' },
+                { value: 'ssl', label: 'SSL' },
+                { value: 'none', label: 'Aucune' },
+              ]}
+            />
+          </Field>
+          <Field label="Timeout (s)">
+            <Input type="number" value={smtp.timeoutSec} onChange={(e) => setSmtp({ ...smtp, timeoutSec: Number(e.target.value) || 20 })} />
+          </Field>
+          <Field label="Utilisateur">
+            <Input value={smtp.username} onChange={(e) => setSmtp({ ...smtp, username: e.target.value })} />
+          </Field>
+          <Field label="Mot de passe" hint={smtp.hasPassword ? 'Déjà enregistré — laissez vide pour conserver.' : ''}>
+            <Input type="password" value={smtp.password} onChange={(e) => setSmtp({ ...smtp, password: e.target.value })} autoComplete="new-password" />
+          </Field>
+          <Field label="Nom expéditeur">
+            <Input value={smtp.fromName} onChange={(e) => setSmtp({ ...smtp, fromName: e.target.value })} />
+          </Field>
+          <Field label="E-mail expéditeur">
+            <Input value={smtp.fromEmail} onChange={(e) => setSmtp({ ...smtp, fromEmail: e.target.value })} />
+          </Field>
+          <Field label="Reply-To" className="md:col-span-2">
+            <Input value={smtp.replyTo} onChange={(e) => setSmtp({ ...smtp, replyTo: e.target.value })} />
+          </Field>
+        </div>
+        <div className="mt-4 flex flex-wrap items-end gap-3 border-t border-slate-100 pt-4">
+          <Field label="Tester l’envoi vers">
+            <Input value={testTo} onChange={(e) => setTestTo(e.target.value)} className="w-64" />
+          </Field>
+          <Button
+            icon={Mail}
+            loading={saving === 'test'}
+            onClick={async () => {
+              setSaving('test');
+              setMsg(null);
+              try {
+                const smtpBody: Record<string, unknown> = { ...smtp };
+                delete smtpBody.hasPassword;
+                if (!smtp.password) delete smtpBody.password;
+                await sa('/mail-settings', { method: 'PUT', body: JSON.stringify({ smtp: smtpBody }) });
+                const r = await sa<{ ok: boolean; error?: string; source: string }>('/mail-settings/test', {
+                  method: 'POST',
+                  body: JSON.stringify({ to: testTo, password: smtp.password || undefined }),
+                });
+                setMsg(r.ok ? { tone: 'success', text: `E-mail de test envoyé (${r.source}).` } : { tone: 'danger', text: r.error || 'Échec SMTP' });
+                load();
+              } catch (e) {
+                setMsg({ tone: 'danger', text: e instanceof Error ? e.message : 'Erreur' });
+              } finally {
+                setSaving('');
+              }
+            }}
+          >
+            Tester SMTP
+          </Button>
+        </div>
+      </Section>
+    </div>
+  );
+}

package/template/apps/superadmin/src/pages/SystemPage.tsx

@@ -0,0 +1,109 @@
+/**
+ * Snapify Superadmin — Santé système
+ */
+import React from 'react';
+import { RefreshCw, Server, ShieldCheck } from 'lucide-react';
+import { Alert, Badge, Button, PageHeader, PageSkeleton, Section, StatCard } from '../../../../src/admin/ui/primitives';
+import { sa } from '../lib/api';
+import { useLoad } from '../lib/hooks';
+
+type SystemInfo = {
+  nodeEnv: string;
+  version: string;
+  database: 'ok' | 'error';
+  flouci: { mockAllowed: boolean; hasPublicKey: boolean; hasPrivateKey: boolean; hasWebhookSecret: boolean };
+  signing: { keyConfigured: boolean; kid: string };
+  superadmin: { username: string; passwordConfigured: boolean };
+  hosts: { community: string; marketplace: string; developers: string };
+};
+
+function Ok({ ok, label }: { ok: boolean; label: string }) {
+  return (
+    <div className="flex items-center justify-between gap-3 text-sm">
+      <span className="text-slate-600">{label}</span>
+      <Badge tone={ok ? 'success' : 'danger'} dot>
+        {ok ? 'OK' : 'Manquant'}
+      </Badge>
+    </div>
+  );
+}
+
+export function SystemPage() {
+  const { data, error, reload } = useLoad(() => sa<SystemInfo>('/system'));
+  if (error) return <Alert tone="danger">{error}</Alert>;
+  if (!data) return <PageSkeleton />;
+
+  const prod = data.nodeEnv === 'production';
+  const paymentReady = data.flouci.hasPublicKey && data.flouci.hasPrivateKey && (!prod || !data.flouci.mockAllowed);
+  const issues: string[] = [];
+  if (data.database !== 'ok') issues.push('Base de données inaccessible');
+  if (!data.superadmin.passwordConfigured) issues.push('SUPERADMIN_PASSWORD non défini');
+  if (!data.signing.keyConfigured) issues.push('SNAPIFY_SIGNING_KEY absente — impossible d’approuver des paquets');
+  if (prod && data.flouci.mockAllowed) issues.push('FLOUCI_MOCK actif en production');
+  if (!paymentReady) issues.push('Clés Flouci incomplètes');
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title="Système"
+        description="Contrôles opérationnels SaaS : paiements, signatures, environnement."
+        actions={
+          <Button icon={RefreshCw} onClick={reload}>
+            Actualiser
+          </Button>
+        }
+      />
+      {issues.length ? (
+        <Alert tone="warning" title="Points d’attention">
+          <ul className="mt-1 list-disc pl-4">
+            {issues.map((i) => (
+              <li key={i}>{i}</li>
+            ))}
+          </ul>
+        </Alert>
+      ) : (
+        <Alert tone="success" title="Plateforme saine">
+          Les contrôles critiques sont au vert.
+        </Alert>
+      )}
+      <div className="grid gap-4 sm:grid-cols-3">
+        <StatCard label="Environnement" value={data.nodeEnv} icon={Server} tone={prod ? 'rose' : 'brand'} hint={`v${data.version}`} />
+        <StatCard label="Base de données" value={data.database === 'ok' ? 'Connectée' : 'Erreur'} icon={ShieldCheck} tone={data.database === 'ok' ? 'sky' : 'rose'} />
+        <StatCard label="Superadmin" value={data.superadmin.username} icon={ShieldCheck} tone="violet" hint={data.superadmin.passwordConfigured ? 'Mot de passe défini' : 'Mot de passe manquant'} />
+      </div>
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Section title="Paiements Flouci" description="Licences + marketplace">
+          <div className="space-y-3">
+            <Ok ok={data.flouci.hasPublicKey} label="Clé publique" />
+            <Ok ok={data.flouci.hasPrivateKey} label="Clé privée" />
+            <Ok ok={data.flouci.hasWebhookSecret} label="Secret webhook" />
+            <Ok ok={!data.flouci.mockAllowed || !prod} label={data.flouci.mockAllowed ? 'Mode mock (dev)' : 'Mode live'} />
+          </div>
+        </Section>
+        <Section title="Signature marketplace" description="Approbation des .snapmod / .snaptheme">
+          <div className="space-y-3">
+            <Ok ok={data.signing.keyConfigured} label="SNAPIFY_SIGNING_KEY" />
+            <div className="flex items-center justify-between text-sm">
+              <span className="text-slate-600">Key ID</span>
+              <span className="font-mono text-xs text-slate-800">{data.signing.kid}</span>
+            </div>
+          </div>
+        </Section>
+        <Section title="Hosts" description="Routage multi-sous-domaines" className="lg:col-span-2">
+          <dl className="grid gap-3 sm:grid-cols-3 text-sm">
+            {[
+              ['Community', data.hosts.community],
+              ['Marketplace', data.hosts.marketplace],
+              ['Developers', data.hosts.developers],
+            ].map(([k, v]) => (
+              <div key={k} className="rounded-lg bg-slate-50 px-3 py-2">
+                <dt className="text-xs font-medium text-slate-500">{k}</dt>
+                <dd className="mt-0.5 break-all font-mono text-xs text-slate-800">{v || '—'}</dd>
+              </div>
+            ))}
+          </dl>
+        </Section>
+      </div>
+    </div>
+  );
+}

package/template/apps/superadmin/src/pages/TicketsPage.tsx

@@ -0,0 +1,201 @@
+/**
+ * Snapify Superadmin — Tickets support / dev / paiement
+ */
+import React, { useMemo, useState } from 'react';
+import { LifeBuoy, Plus, RefreshCw, Trash2 } from 'lucide-react';
+import { Alert, Badge, Button, Card, EmptyState, Field, Input, PageHeader, PageSkeleton, Select, Table, Tabs, Td, Textarea, Th } from '../../../../src/admin/ui/primitives';
+import { sa, when } from '../lib/api';
+import { useLoad } from '../lib/hooks';
+
+type Ticket = {
+  id: string;
+  kind: string;
+  status: string;
+  priority: string;
+  subject: string;
+  body: string;
+  email: string | null;
+  name: string | null;
+  createdAt: string;
+  updatedAt: string;
+};
+
+const KIND_OPTS = [
+  { value: 'support', label: 'Support' },
+  { value: 'payment', label: 'Paiement' },
+  { value: 'dev', label: 'Ticket dev' },
+  { value: 'license', label: 'Licence' },
+  { value: 'payout', label: 'Payout' },
+  { value: 'bug', label: 'Bug client' },
+];
+
+const STATUS_OPTS = [
+  { value: 'open', label: 'Ouvert' },
+  { value: 'in_progress', label: 'En cours' },
+  { value: 'waiting', label: 'En attente' },
+  { value: 'resolved', label: 'Résolu' },
+  { value: 'closed', label: 'Fermé' },
+];
+
+export function TicketsPage() {
+  const [status, setStatus] = useState('all');
+  const [kind, setKind] = useState('all');
+  const { data, error, reload } = useLoad(() => sa<{ items: Ticket[] }>(`/tickets?status=${status}&kind=${kind}`), [status, kind]);
+  const [busy, setBusy] = useState<string | null>(null);
+  const [msg, setMsg] = useState('');
+  const [form, setForm] = useState({ subject: '', body: '', kind: 'dev', priority: 'normal', email: '', name: '' });
+  const items = data?.items || [];
+  const openCount = useMemo(() => items.filter((t) => t.status === 'open' || t.status === 'in_progress').length, [items]);
+
+  const create = async () => {
+    setBusy('new');
+    setMsg('');
+    try {
+      await sa('/tickets', { method: 'POST', body: JSON.stringify(form) });
+      setForm({ subject: '', body: '', kind: 'dev', priority: 'normal', email: '', name: '' });
+      setMsg('Ticket créé.');
+      reload();
+    } catch (e) {
+      setMsg(e instanceof Error ? e.message : 'Erreur');
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title="Tickets"
+        description="Support, paiements Flouci, tickets développeurs et licences."
+        actions={
+          <Button icon={RefreshCw} onClick={reload}>
+            Actualiser
+          </Button>
+        }
+      />
+      {error ? <Alert tone="danger">{error}</Alert> : null}
+      {msg ? <Alert tone={msg.includes('Erreur') ? 'danger' : 'success'}>{msg}</Alert> : null}
+
+      <Card padded>
+        <h2 className="mb-3 text-[15px] font-semibold text-slate-900">Nouveau ticket</h2>
+        <div className="grid gap-3 md:grid-cols-2">
+          <Field label="Sujet">
+            <Input value={form.subject} onChange={(e) => setForm({ ...form, subject: e.target.value })} placeholder="Ex. Bug signature module…" />
+          </Field>
+          <Field label="Type">
+            <Select value={form.kind} onChange={(v) => setForm({ ...form, kind: v })} options={KIND_OPTS} />
+          </Field>
+          <Field label="Contact (e-mail)">
+            <Input value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} />
+          </Field>
+          <Field label="Nom">
+            <Input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
+          </Field>
+          <Field label="Description" className="md:col-span-2">
+            <Textarea rows={3} value={form.body} onChange={(e) => setForm({ ...form, body: e.target.value })} />
+          </Field>
+        </div>
+        <div className="mt-3">
+          <Button variant="primary" icon={Plus} loading={busy === 'new'} onClick={() => void create()} disabled={!form.subject.trim()}>
+            Créer
+          </Button>
+        </div>
+      </Card>
+
+      <Tabs
+        value={status}
+        onChange={setStatus}
+        tabs={[
+          { value: 'all', label: 'Tous', badge: <Badge>{items.length}</Badge> },
+          { value: 'open', label: 'Ouverts', badge: <Badge tone="warning">{openCount}</Badge> },
+          { value: 'in_progress', label: 'En cours' },
+          { value: 'resolved', label: 'Résolus' },
+          { value: 'closed', label: 'Fermés' },
+        ]}
+      />
+      <div className="mb-3 flex flex-wrap gap-2">
+        {[{ value: 'all', label: 'Tous types' }, ...KIND_OPTS].map((k) => (
+          <Button key={k.value} size="sm" variant={k.value === kind ? 'secondary' : 'ghost'} onClick={() => setKind(k.value)}>
+            {k.label}
+          </Button>
+        ))}
+      </div>
+
+      <Card padded={false}>
+        {!data ? (
+          <div className="p-5">
+            <PageSkeleton />
+          </div>
+        ) : items.length ? (
+          <Table>
+            <thead>
+              <tr>
+                <Th>Ticket</Th>
+                <Th>Type</Th>
+                <Th>Priorité</Th>
+                <Th>Statut</Th>
+                <Th className="hidden sm:table-cell">Maj</Th>
+                <Th />
+              </tr>
+            </thead>
+            <tbody>
+              {items.map((t) => (
+                <tr key={t.id} className="hover:bg-slate-50/60">
+                  <Td>
+                    <p className="font-medium text-slate-900">{t.subject}</p>
+                    <p className="text-xs text-slate-500">{t.name || t.email || '—'}</p>
+                  </Td>
+                  <Td>
+                    <Badge>{KIND_OPTS.find((k) => k.value === t.kind)?.label || t.kind}</Badge>
+                  </Td>
+                  <Td>
+                    <Badge tone={t.priority === 'urgent' || t.priority === 'high' ? 'danger' : 'neutral'}>{t.priority}</Badge>
+                  </Td>
+                  <Td>
+                    <Select
+                      value={t.status}
+                      options={STATUS_OPTS}
+                      disabled={busy === t.id}
+                      onChange={async (v) => {
+                        setBusy(t.id);
+                        try {
+                          await sa(`/tickets/${t.id}`, { method: 'PATCH', body: JSON.stringify({ status: v }) });
+                          reload();
+                        } catch (err) {
+                          setMsg(err instanceof Error ? err.message : 'Erreur');
+                        } finally {
+                          setBusy(null);
+                        }
+                      }}
+                    />
+                  </Td>
+                  <Td className="hidden whitespace-nowrap text-slate-500 sm:table-cell">{when(t.updatedAt)}</Td>
+                  <Td className="text-right">
+                    <Button
+                      size="sm"
+                      variant="danger"
+                      icon={Trash2}
+                      disabled={busy === t.id}
+                      onClick={async () => {
+                        if (!window.confirm('Supprimer ce ticket ?')) return;
+                        setBusy(t.id);
+                        try {
+                          await sa(`/tickets/${t.id}`, { method: 'DELETE' });
+                          reload();
+                        } finally {
+                          setBusy(null);
+                        }
+                      }}
+                    />
+                  </Td>
+                </tr>
+              ))}
+            </tbody>
+          </Table>
+        ) : (
+          <EmptyState icon={LifeBuoy} title="Aucun ticket" description="Créez un ticket support, paiement ou développeur." />
+        )}
+      </Card>
+    </div>
+  );
+}

package/template/apps/superadmin/src/pages/UsersPage.tsx

@@ -0,0 +1,167 @@
+/**
+ * Snapify Superadmin — Utilisateurs plateforme
+ */
+import React, { useMemo, useState } from 'react';
+import { RefreshCw, Search, Trash2, Users } from 'lucide-react';
+import { Alert, Badge, Button, Card, EmptyState, Input, PageHeader, PageSkeleton, Select, Table, Tabs, Td, Th } from '../../../../src/admin/ui/primitives';
+import { sa, when } from '../lib/api';
+import { useLoad } from '../lib/hooks';
+
+type UserRow = {
+  id: string;
+  email: string;
+  displayName: string;
+  role: 'member' | 'publisher' | 'mod' | 'admin';
+  createdAt: string;
+  publisher: { id: string; status: string; displayName: string } | null;
+};
+
+const ROLE_OPTS = [
+  { value: 'member', label: 'Membre' },
+  { value: 'publisher', label: 'Éditeur' },
+  { value: 'mod', label: 'Modérateur' },
+  { value: 'admin', label: 'Admin plateforme' },
+];
+
+export function UsersPage() {
+  const [role, setRole] = useState('all');
+  const [q, setQ] = useState('');
+  const { data, error, reload } = useLoad(() => sa<{ items: UserRow[] }>(`/users?role=${role}`), [role]);
+  const [busy, setBusy] = useState<string | null>(null);
+  const [msg, setMsg] = useState('');
+  const items = data?.items || [];
+  const filtered = useMemo(() => {
+    const nq = q.trim().toLowerCase();
+    if (!nq) return items;
+    return items.filter((u) => u.email.toLowerCase().includes(nq) || u.displayName.toLowerCase().includes(nq));
+  }, [items, q]);
+
+  const setUserRole = async (u: UserRow, next: string) => {
+    setBusy(u.id);
+    setMsg('');
+    try {
+      await sa(`/users/${u.id}`, { method: 'PATCH', body: JSON.stringify({ role: next, revokeSessions: next === 'member' }) });
+      setMsg(`Rôle de ${u.email} → ${next}`);
+      reload();
+    } catch (e) {
+      setMsg(e instanceof Error ? e.message : 'Erreur');
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  return (
+    <div>
+      <PageHeader
+        title="Utilisateurs"
+        description="Comptes community + marketplace (rôles, éditeurs liés)."
+        actions={
+          <Button icon={RefreshCw} onClick={reload}>
+            Actualiser
+          </Button>
+        }
+      />
+      {error ? <Alert tone="danger">{error}</Alert> : null}
+      {msg ? (
+        <div className="mb-4">
+          <Alert tone={msg.includes('Erreur') || msg.includes('impossible') ? 'danger' : 'success'}>{msg}</Alert>
+        </div>
+      ) : null}
+      <Tabs
+        value={role}
+        onChange={setRole}
+        tabs={[
+          { value: 'all', label: 'Tous', badge: <Badge>{items.length}</Badge> },
+          { value: 'member', label: 'Membres' },
+          { value: 'publisher', label: 'Éditeurs' },
+          { value: 'mod', label: 'Mods' },
+          { value: 'admin', label: 'Admins' },
+        ]}
+      />
+      <Card padded={false}>
+        <div className="border-b border-slate-100 p-3">
+          <div className="relative max-w-sm">
+            <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="E-mail ou nom…" className="pl-9" />
+          </div>
+        </div>
+        {!data ? (
+          <div className="p-5">
+            <PageSkeleton />
+          </div>
+        ) : filtered.length ? (
+          <Table>
+            <thead>
+              <tr>
+                <Th>Utilisateur</Th>
+                <Th>Rôle</Th>
+                <Th className="hidden md:table-cell">Éditeur</Th>
+                <Th className="hidden sm:table-cell">Inscrit</Th>
+                <Th />
+              </tr>
+            </thead>
+            <tbody>
+              {filtered.map((u) => (
+                <tr key={u.id} className="hover:bg-slate-50/60">
+                  <Td>
+                    <p className="font-medium text-slate-900">{u.displayName}</p>
+                    <p className="text-xs text-slate-500">{u.email}</p>
+                  </Td>
+                  <Td>
+                    <Badge tone={u.role === 'admin' ? 'danger' : u.role === 'publisher' ? 'brand' : 'neutral'}>{u.role}</Badge>
+                  </Td>
+                  <Td className="hidden md:table-cell">
+                    {u.publisher ? (
+                      <span className="text-sm text-slate-700">
+                        {u.publisher.displayName}{' '}
+                        <Badge tone={u.publisher.status === 'active' ? 'success' : 'warning'}>{u.publisher.status}</Badge>
+                      </span>
+                    ) : (
+                      <span className="text-slate-400">—</span>
+                    )}
+                  </Td>
+                  <Td className="hidden whitespace-nowrap text-slate-500 sm:table-cell">{when(u.createdAt)}</Td>
+                  <Td className="text-right">
+                    <div className="flex flex-wrap items-center justify-end gap-1.5">
+                      <Select
+                        value={u.role}
+                        disabled={busy === u.id}
+                        onChange={(v) => void setUserRole(u, v)}
+                        options={ROLE_OPTS}
+                        className="w-44"
+                      />
+                      {!u.publisher ? (
+                        <Button
+                          size="sm"
+                          variant="danger"
+                          icon={Trash2}
+                          disabled={busy === u.id}
+                          onClick={async () => {
+                            if (!window.confirm(`Supprimer ${u.email} ?`)) return;
+                            setBusy(u.id);
+                            setMsg('');
+                            try {
+                              await sa(`/users/${u.id}`, { method: 'DELETE' });
+                              setMsg(`${u.email} supprimé.`);
+                              reload();
+                            } catch (e) {
+                              setMsg(e instanceof Error ? e.message : 'Erreur');
+                            } finally {
+                              setBusy(null);
+                            }
+                          }}
+                        />
+                      ) : null}
+                    </div>
+                  </Td>
+                </tr>
+              ))}
+            </tbody>
+          </Table>
+        ) : (
+          <EmptyState icon={Users} title="Aucun utilisateur" description="Aucun compte pour ce filtre." />
+        )}
+      </Card>
+    </div>
+  );
+}