create-snapify-app 0.0.0-stage → 1.1.0

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

@@ -0,0 +1,195 @@
+/**
+ * Snapify Superadmin — Commandes marketplace
+ */
+import React, { useMemo, useState } from 'react';
+import { ChevronDown, FileText, RefreshCw, Search, ShoppingBag, Undo2 } from 'lucide-react';
+import { Alert, Badge, Button, Card, cx, EmptyState, Input, PageHeader, PageSkeleton, Table, Tabs, Td, Th } from '../../../../src/admin/ui/primitives';
+import { dt, sa, when } from '../lib/api';
+import { useLoad } from '../lib/hooks';
+
+type Order = {
+  id: string;
+  status: string;
+  totalMillimes: number;
+  commissionMillimes: number;
+  totalLabel: string;
+  commissionLabel: string;
+  buyerEmail: string | null;
+  buyerName: string | null;
+  createdAt: string;
+  paidAt: string | null;
+  lines: { productName: string; unitPriceLabel: string; licenseKey: string }[];
+};
+
+export function OrdersPage() {
+  const [status, setStatus] = useState('all');
+  const [q, setQ] = useState('');
+  const [open, setOpen] = useState<string | null>(null);
+  const [busy, setBusy] = useState<string | null>(null);
+  const [flash, setFlash] = useState('');
+  const { data, error, reload } = useLoad(() => sa<{ items: Order[] }>(`/orders?status=${status}`), [status]);
+  const items = data?.items || [];
+  const filtered = useMemo(() => {
+    const nq = q.trim().toLowerCase();
+    if (!nq) return items;
+    return items.filter(
+      (o) =>
+        o.buyerEmail?.toLowerCase().includes(nq) ||
+        o.buyerName?.toLowerCase().includes(nq) ||
+        o.id.toLowerCase().includes(nq) ||
+        o.lines.some((l) => l.productName.toLowerCase().includes(nq))
+    );
+  }, [items, q]);
+  const count = (s: string) => items.filter((o) => o.status === s).length;
+
+  return (
+    <div>
+      <PageHeader
+        title="Commandes marketplace"
+        description="Achats de modules et thèmes — commissions NOVALABS incluses."
+        actions={
+          <Button icon={RefreshCw} onClick={reload}>
+            Actualiser
+          </Button>
+        }
+      />
+      {error ? <Alert tone="danger">{error}</Alert> : null}
+      {flash ? (
+        <div className="mb-4">
+          <Alert tone={flash.toLowerCase().includes('erreur') || flash.toLowerCase().includes('impossible') ? 'danger' : 'success'}>{flash}</Alert>
+        </div>
+      ) : null}
+      <Tabs
+        value={status}
+        onChange={setStatus}
+        tabs={[
+          { value: 'all', label: 'Toutes', badge: <Badge>{items.length}</Badge> },
+          { value: 'paid', label: 'Payées', badge: <Badge tone="success">{count('paid')}</Badge> },
+          { value: 'pending', label: 'En attente', badge: <Badge tone="warning">{count('pending')}</Badge> },
+          { value: 'failed', label: 'Échouées', badge: <Badge tone="danger">{count('failed')}</Badge> },
+          { value: 'refunded', label: 'Remboursées' },
+        ]}
+      />
+      <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="Acheteur, produit, n° commande…" className="pl-9" />
+          </div>
+        </div>
+        {!data ? (
+          <div className="p-5">
+            <PageSkeleton />
+          </div>
+        ) : filtered.length ? (
+          <Table>
+            <thead>
+              <tr>
+                <Th>Commande</Th>
+                <Th>Acheteur</Th>
+                <Th>Montant</Th>
+                <Th className="hidden md:table-cell">Commission</Th>
+                <Th>Statut</Th>
+                <Th className="hidden sm:table-cell">Date</Th>
+                <Th />
+              </tr>
+            </thead>
+            <tbody>
+              {filtered.map((o) => (
+                <React.Fragment key={o.id}>
+                  <tr className={cx('cursor-pointer hover:bg-slate-50/60', open === o.id && 'bg-slate-50/60')} onClick={() => setOpen(open === o.id ? null : o.id)}>
+                    <Td className="font-mono text-xs">{o.id.slice(0, 8)}…</Td>
+                    <Td>
+                      <p className="font-medium text-slate-900">{o.buyerName || '—'}</p>
+                      <p className="text-xs text-slate-500">{o.buyerEmail || '—'}</p>
+                    </Td>
+                    <Td className="whitespace-nowrap font-medium">{o.totalLabel}</Td>
+                    <Td className="hidden whitespace-nowrap text-slate-600 md:table-cell">{o.commissionLabel}</Td>
+                    <Td>
+                      <Badge tone={o.status === 'paid' ? 'success' : o.status === 'failed' ? 'danger' : 'warning'} dot>
+                        {o.status}
+                      </Badge>
+                    </Td>
+                    <Td className="hidden whitespace-nowrap text-slate-500 sm:table-cell">{when(o.paidAt || o.createdAt)}</Td>
+                    <Td>
+                      <ChevronDown className={cx('ml-auto h-4 w-4 text-slate-400 transition-transform', open === o.id && 'rotate-180')} />
+                    </Td>
+                  </tr>
+                  {open === o.id ? (
+                    <tr>
+                      <td colSpan={7} className="border-b border-slate-100 bg-slate-50/40 px-5 py-4">
+                        <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500">Lignes · {dt(o.totalMillimes)}</p>
+                        <ul className="space-y-2 text-sm">
+                          {o.lines.map((l, i) => (
+                            <li key={i} className="flex flex-wrap items-center justify-between gap-2 rounded-lg bg-white px-3 py-2 ring-1 ring-slate-100">
+                              <span className="font-medium text-slate-800">{l.productName}</span>
+                              <span className="tabular-nums text-slate-600">{l.unitPriceLabel}</span>
+                              <span className="w-full font-mono text-[11px] text-slate-400">{l.licenseKey}</span>
+                            </li>
+                          ))}
+                          {!o.lines.length ? <li className="text-slate-500">Aucune ligne.</li> : null}
+                        </ul>
+                        <div className="mt-4 flex flex-wrap gap-2 border-t border-slate-200 pt-4">
+                          <Button
+                            size="sm"
+                            icon={FileText}
+                            loading={busy === o.id}
+                            onClick={async (e) => {
+                              e.stopPropagation();
+                              setBusy(o.id);
+                              setFlash('');
+                              try {
+                                const r = await sa<{ invoice: { number: string } }>(`/orders/${o.id}/invoice`, { method: 'POST', body: '{}' });
+                                setFlash(`Facture ${r.invoice.number} créée — voir Factures.`);
+                              } catch (err) {
+                                setFlash(err instanceof Error ? err.message : 'Erreur');
+                              } finally {
+                                setBusy(null);
+                              }
+                            }}
+                          >
+                            Générer facture
+                          </Button>
+                          {o.status === 'paid' ? (
+                            <Button
+                              size="sm"
+                              variant="danger"
+                              icon={Undo2}
+                              loading={busy === o.id}
+                              onClick={async (e) => {
+                                e.stopPropagation();
+                                if (!window.confirm('Enregistrer un remboursement (retour Flouci) et révoquer les téléchargements ?')) return;
+                                setBusy(o.id);
+                                setFlash('');
+                                try {
+                                  const r = await sa<{ flouciHint?: string }>(`/orders/${o.id}/refund`, {
+                                    method: 'POST',
+                                    body: JSON.stringify({ note: 'Remboursement superadmin' }),
+                                  });
+                                  setFlash(r.flouciHint || 'Remboursement enregistré.');
+                                  reload();
+                                } catch (err) {
+                                  setFlash(err instanceof Error ? err.message : 'Erreur');
+                                } finally {
+                                  setBusy(null);
+                                }
+                              }}
+                            >
+                              Rembourser / retour Flouci
+                            </Button>
+                          ) : null}
+                        </div>
+                      </td>
+                    </tr>
+                  ) : null}
+                </React.Fragment>
+              ))}
+            </tbody>
+          </Table>
+        ) : (
+          <EmptyState icon={ShoppingBag} title="Aucune commande" description="Les achats marketplace apparaîtront ici." />
+        )}
+      </Card>
+    </div>
+  );
+}

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

@@ -0,0 +1,150 @@
+/**
+ * Snapify Superadmin — Événements paiement Flouci
+ */
+import React, { useState } from 'react';
+import { CreditCard, Plus, RefreshCw } from 'lucide-react';
+import { Alert, Badge, Button, Card, EmptyState, Field, Input, PageHeader, PageSkeleton, Section, Select, Table, Td, Textarea, Th } from '../../../../src/admin/ui/primitives';
+import { sa, when } from '../lib/api';
+import { useLoad } from '../lib/hooks';
+import { useDtField } from '../../../shared/ui';
+
+type Evt = {
+  id: string;
+  provider: string;
+  kind: string;
+  amountMillimes: number;
+  amountLabel: string;
+  status: string;
+  trackingId: string | null;
+  paymentId: string | null;
+  refType: string | null;
+  refId: string | null;
+  meta: Record<string, unknown>;
+  createdAt: string;
+};
+
+export function PaymentsPage() {
+  const { data, error, reload } = useLoad(() => sa<{ items: Evt[] }>('/payments'));
+  const [form, setForm] = useState({ kind: 'refund', amountMillimes: 0, status: 'recorded', trackingId: '', paymentId: '', note: '', refType: '', refId: '' });
+  const amount = useDtField(form.amountMillimes, (m) => setForm((f) => ({ ...f, amountMillimes: m })));
+  const [busy, setBusy] = useState(false);
+  const [msg, setMsg] = useState('');
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title="Paiements & retours Flouci"
+        description="Journal des charges, remboursements et frais — à croiser avec le dashboard Flouci."
+        actions={
+          <Button icon={RefreshCw} onClick={reload}>
+            Actualiser
+          </Button>
+        }
+      />
+      {error ? <Alert tone="danger">{error}</Alert> : null}
+      {msg ? <Alert tone="success">{msg}</Alert> : null}
+
+      <Section title="Enregistrer un événement" description="Ex. remboursement effectué dans Flouci, frais, charge manuelle.">
+        <div className="grid gap-3 md:grid-cols-3">
+          <Field label="Type">
+            <Select
+              value={form.kind}
+              onChange={(v) => setForm({ ...form, kind: v })}
+              options={[
+                { value: 'charge', label: 'Charge' },
+                { value: 'refund', label: 'Remboursement (retour)' },
+                { value: 'fee', label: 'Frais' },
+                { value: 'payout', label: 'Payout' },
+              ]}
+            />
+          </Field>
+          <Field label="Montant">
+            <Input prefix="DT" {...amount} />
+          </Field>
+          <Field label="Statut">
+            <Input value={form.status} onChange={(e) => setForm({ ...form, status: e.target.value })} />
+          </Field>
+          <Field label="Payment ID Flouci">
+            <Input value={form.paymentId} onChange={(e) => setForm({ ...form, paymentId: e.target.value })} className="font-mono" />
+          </Field>
+          <Field label="Tracking ID">
+            <Input value={form.trackingId} onChange={(e) => setForm({ ...form, trackingId: e.target.value })} className="font-mono" />
+          </Field>
+          <Field label="Réf. (type / id)">
+            <div className="flex gap-2">
+              <Input placeholder="order|license" value={form.refType} onChange={(e) => setForm({ ...form, refType: e.target.value })} />
+              <Input placeholder="uuid" value={form.refId} onChange={(e) => setForm({ ...form, refId: e.target.value })} />
+            </div>
+          </Field>
+          <Field label="Note" className="md:col-span-3">
+            <Textarea rows={2} value={form.note} onChange={(e) => setForm({ ...form, note: e.target.value })} />
+          </Field>
+        </div>
+        <div className="mt-3">
+          <Button
+            variant="primary"
+            icon={Plus}
+            loading={busy}
+            onClick={async () => {
+              setBusy(true);
+              setMsg('');
+              try {
+                await sa('/payments', { method: 'POST', body: JSON.stringify(form) });
+                setMsg('Événement enregistré.');
+                setForm((f) => ({ ...f, note: '', paymentId: '', trackingId: '' }));
+                reload();
+              } catch (e) {
+                setMsg(e instanceof Error ? e.message : 'Erreur');
+              } finally {
+                setBusy(false);
+              }
+            }}
+          >
+            Enregistrer
+          </Button>
+        </div>
+      </Section>
+
+      <Card padded={false}>
+        {!data ? (
+          <div className="p-5">
+            <PageSkeleton />
+          </div>
+        ) : data.items.length ? (
+          <Table>
+            <thead>
+              <tr>
+                <Th>Date</Th>
+                <Th>Type</Th>
+                <Th>Montant</Th>
+                <Th>Statut</Th>
+                <Th className="hidden md:table-cell">Réf.</Th>
+                <Th className="hidden lg:table-cell">Flouci</Th>
+              </tr>
+            </thead>
+            <tbody>
+              {data.items.map((e) => (
+                <tr key={e.id} className="hover:bg-slate-50/60">
+                  <Td className="whitespace-nowrap text-slate-500">{when(e.createdAt)}</Td>
+                  <Td>
+                    <Badge tone={e.kind === 'refund' ? 'warning' : e.kind === 'charge' ? 'success' : 'neutral'}>{e.kind}</Badge>
+                  </Td>
+                  <Td className="font-medium tabular-nums">{e.amountLabel}</Td>
+                  <Td>{e.status}</Td>
+                  <Td className="hidden font-mono text-xs text-slate-500 md:table-cell">
+                    {e.refType ? `${e.refType}:${(e.refId || '').slice(0, 8)}` : '—'}
+                  </Td>
+                  <Td className="hidden max-w-[180px] truncate font-mono text-[11px] text-slate-400 lg:table-cell">
+                    {e.paymentId || e.trackingId || '—'}
+                  </Td>
+                </tr>
+              ))}
+            </tbody>
+          </Table>
+        ) : (
+          <EmptyState icon={CreditCard} title="Aucun événement" description="Les relances, remboursements et saisies manuelles apparaîtront ici." />
+        )}
+      </Card>
+    </div>
+  );
+}

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

@@ -0,0 +1,133 @@
+/**
+ * Snapify Superadmin — Payouts éditeurs
+ */
+import React, { useState } from 'react';
+import { Banknote, RefreshCw } from 'lucide-react';
+import { Alert, Badge, Button, Card, EmptyState, PageHeader, PageSkeleton, Table, Tabs, Td, Th } from '../../../../src/admin/ui/primitives';
+import { sa, when } from '../lib/api';
+import { useLoad } from '../lib/hooks';
+
+type Payout = {
+  id: string;
+  amountMillimes: number;
+  amountLabel: string;
+  status: 'requested' | 'paid' | 'rejected';
+  period: string;
+  note: string | null;
+  createdAt: string;
+  paidAt: string | null;
+  publisherName: string;
+  publisherIban: string | null;
+  publisherEmail: string | null;
+};
+
+export function PayoutsPage() {
+  const [status, setStatus] = useState('requested');
+  const { data, error, reload } = useLoad(() => sa<{ items: Payout[] }>(`/payouts?status=${status}`), [status]);
+  const [busy, setBusy] = useState<string | null>(null);
+  const [msg, setMsg] = useState<{ tone: 'success' | 'danger'; text: string } | null>(null);
+  const items = data?.items || [];
+
+  const act = async (p: Payout, next: 'paid' | 'rejected') => {
+    setBusy(p.id);
+    setMsg(null);
+    try {
+      await sa(`/payouts/${p.id}`, {
+        method: 'POST',
+        body: JSON.stringify({ status: next, note: next === 'rejected' ? 'Refusé par superadmin' : 'Virement effectué' }),
+      });
+      setMsg({ tone: 'success', text: next === 'paid' ? `Payout ${p.amountLabel} marqué payé.` : `Payout rejeté.` });
+      reload();
+    } catch (e) {
+      setMsg({ tone: 'danger', text: e instanceof Error ? e.message : 'Erreur' });
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  return (
+    <div>
+      <PageHeader
+        title="Payouts"
+        description="Demandes de virement des éditeurs — vérifier l’IBAN puis marquer payé."
+        actions={
+          <Button icon={RefreshCw} onClick={reload}>
+            Actualiser
+          </Button>
+        }
+      />
+      {error ? <Alert tone="danger">{error}</Alert> : null}
+      {msg ? (
+        <div className="mb-4">
+          <Alert tone={msg.tone}>{msg.text}</Alert>
+        </div>
+      ) : null}
+      <Tabs
+        value={status}
+        onChange={setStatus}
+        tabs={[
+          { value: 'requested', label: 'À traiter', badge: status === 'requested' ? <Badge tone="warning">{items.length}</Badge> : undefined },
+          { value: 'paid', label: 'Payés' },
+          { value: 'rejected', label: 'Rejetés' },
+          { value: 'all', label: 'Tous' },
+        ]}
+      />
+      <Card padded={false}>
+        {!data ? (
+          <div className="p-5">
+            <PageSkeleton />
+          </div>
+        ) : items.length ? (
+          <Table>
+            <thead>
+              <tr>
+                <Th>Éditeur</Th>
+                <Th>Montant</Th>
+                <Th className="hidden md:table-cell">Période</Th>
+                <Th className="hidden lg:table-cell">IBAN</Th>
+                <Th>Statut</Th>
+                <Th className="hidden sm:table-cell">Demandé</Th>
+                <Th />
+              </tr>
+            </thead>
+            <tbody>
+              {items.map((p) => (
+                <tr key={p.id} className="hover:bg-slate-50/60">
+                  <Td>
+                    <p className="font-medium text-slate-900">{p.publisherName}</p>
+                    <p className="text-xs text-slate-500">{p.publisherEmail || '—'}</p>
+                  </Td>
+                  <Td className="whitespace-nowrap font-semibold tabular-nums">{p.amountLabel}</Td>
+                  <Td className="hidden text-slate-600 md:table-cell">{p.period}</Td>
+                  <Td className="hidden max-w-[200px] truncate font-mono text-xs text-slate-500 lg:table-cell">{p.publisherIban || '—'}</Td>
+                  <Td>
+                    <Badge tone={p.status === 'paid' ? 'success' : p.status === 'rejected' ? 'danger' : 'warning'} dot>
+                      {p.status === 'requested' ? 'Demandé' : p.status === 'paid' ? 'Payé' : 'Rejeté'}
+                    </Badge>
+                  </Td>
+                  <Td className="hidden whitespace-nowrap text-slate-500 sm:table-cell">{when(p.createdAt)}</Td>
+                  <Td className="text-right">
+                    {p.status === 'requested' ? (
+                      <div className="flex justify-end gap-1.5">
+                        <Button size="sm" variant="secondary" loading={busy === p.id} onClick={() => void act(p, 'paid')}>
+                          Marquer payé
+                        </Button>
+                        <Button size="sm" variant="danger" disabled={busy === p.id} onClick={() => void act(p, 'rejected')}>
+                          Rejeter
+                        </Button>
+                      </div>
+                    ) : p.note ? (
+                      <span className="text-xs text-slate-500">{p.note}</span>
+                    ) : null}
+                  </Td>
+                </tr>
+              ))}
+            </tbody>
+          </Table>
+        ) : (
+          <EmptyState icon={Banknote} title="Aucun payout" description="Les demandes de virement des éditeurs apparaîtront ici." />
+        )}
+      </Card>
+    </div>
+  );
+}

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

@@ -0,0 +1,151 @@
+/**
+ * Snapify Superadmin — Éditeurs marketplace
+ */
+import React, { useMemo, useState } from 'react';
+import { RefreshCw, Search, Store } from 'lucide-react';
+import { Alert, Badge, Button, Card, EmptyState, Input, PageHeader, PageSkeleton, Table, Tabs, Td, Th } from '../../../../src/admin/ui/primitives';
+import { sa, when } from '../lib/api';
+import { useLoad } from '../lib/hooks';
+
+type Publisher = {
+  id: string;
+  displayName: string;
+  website: string | null;
+  payoutIban: string | null;
+  status: 'pending_payment' | 'active' | 'suspended';
+  paidAt: string | null;
+  createdAt: string;
+  email: string | null;
+  productCount: number;
+};
+
+export function PublishersPage() {
+  const [status, setStatus] = useState('all');
+  const [q, setQ] = useState('');
+  const { data, error, reload } = useLoad(() => sa<{ items: Publisher[] }>(`/publishers?status=${status}`), [status]);
+  const [busy, setBusy] = useState<string | null>(null);
+  const [msg, setMsg] = useState<{ tone: 'success' | 'danger'; text: string } | null>(null);
+  const items = data?.items || [];
+  const filtered = useMemo(() => {
+    const nq = q.trim().toLowerCase();
+    if (!nq) return items;
+    return items.filter((p) => p.displayName.toLowerCase().includes(nq) || p.email?.toLowerCase().includes(nq));
+  }, [items, q]);
+
+  const patch = async (p: Publisher, next: 'active' | 'suspended' | 'pending_payment', markPaid?: boolean) => {
+    setBusy(p.id);
+    setMsg(null);
+    try {
+      await sa(`/publishers/${p.id}`, { method: 'PATCH', body: JSON.stringify({ status: next, markPaid }) });
+      setMsg({
+        tone: 'success',
+        text:
+          next === 'suspended'
+            ? `${p.displayName} suspendu — ses produits publiés ont été repassés en brouillon.`
+            : `${p.displayName} → ${next}`,
+      });
+      reload();
+    } catch (e) {
+      setMsg({ tone: 'danger', text: e instanceof Error ? e.message : 'Erreur' });
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  const count = (s: string) => items.filter((p) => p.status === s).length;
+
+  return (
+    <div>
+      <PageHeader
+        title="Éditeurs"
+        description="Comptes vendeurs marketplace : activation, suspension, IBAN payout."
+        actions={
+          <Button icon={RefreshCw} onClick={reload}>
+            Actualiser
+          </Button>
+        }
+      />
+      {error ? <Alert tone="danger">{error}</Alert> : null}
+      {msg ? (
+        <div className="mb-4">
+          <Alert tone={msg.tone}>{msg.text}</Alert>
+        </div>
+      ) : null}
+      <Tabs
+        value={status}
+        onChange={setStatus}
+        tabs={[
+          { value: 'all', label: 'Tous', badge: <Badge>{items.length}</Badge> },
+          { value: 'active', label: 'Actifs', badge: <Badge tone="success">{count('active')}</Badge> },
+          { value: 'pending_payment', label: 'Paiement', badge: <Badge tone="warning">{count('pending_payment')}</Badge> },
+          { value: 'suspended', label: 'Suspendus', badge: <Badge tone="danger">{count('suspended')}</Badge> },
+        ]}
+      />
+      <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="Nom ou e-mail…" className="pl-9" />
+          </div>
+        </div>
+        {!data ? (
+          <div className="p-5">
+            <PageSkeleton />
+          </div>
+        ) : filtered.length ? (
+          <Table>
+            <thead>
+              <tr>
+                <Th>Éditeur</Th>
+                <Th>Statut</Th>
+                <Th className="hidden md:table-cell">Produits</Th>
+                <Th className="hidden lg:table-cell">IBAN</Th>
+                <Th className="hidden sm:table-cell">Inscrit</Th>
+                <Th />
+              </tr>
+            </thead>
+            <tbody>
+              {filtered.map((p) => (
+                <tr key={p.id} className="hover:bg-slate-50/60">
+                  <Td>
+                    <p className="font-medium text-slate-900">{p.displayName}</p>
+                    <p className="text-xs text-slate-500">{p.email || '—'}</p>
+                    {p.website ? (
+                      <a href={p.website} target="_blank" rel="noreferrer" className="text-xs text-brand-700 hover:underline">
+                        {p.website}
+                      </a>
+                    ) : null}
+                  </Td>
+                  <Td>
+                    <Badge tone={p.status === 'active' ? 'success' : p.status === 'suspended' ? 'danger' : 'warning'} dot>
+                      {p.status === 'pending_payment' ? 'Paiement' : p.status === 'active' ? 'Actif' : 'Suspendu'}
+                    </Badge>
+                  </Td>
+                  <Td className="hidden tabular-nums md:table-cell">{p.productCount}</Td>
+                  <Td className="hidden max-w-[180px] truncate font-mono text-xs text-slate-500 lg:table-cell">{p.payoutIban || '—'}</Td>
+                  <Td className="hidden whitespace-nowrap text-slate-500 sm:table-cell">{when(p.createdAt)}</Td>
+                  <Td className="text-right">
+                    <div className="flex justify-end gap-1.5">
+                      {p.status !== 'active' ? (
+                        <Button size="sm" variant="secondary" loading={busy === p.id} onClick={() => void patch(p, 'active', true)}>
+                          Activer
+                        </Button>
+                      ) : null}
+                      {p.status === 'active' ? (
+                        <Button size="sm" variant="danger" disabled={busy === p.id} onClick={() => void patch(p, 'suspended')}>
+                          Suspendre
+                        </Button>
+                      ) : null}
+                    </div>
+                  </Td>
+                </tr>
+              ))}
+            </tbody>
+          </Table>
+        ) : (
+          <EmptyState icon={Store} title="Aucun éditeur" description="Les inscriptions développeur apparaîtront ici." />
+        )}
+      </Card>
+    </div>
+  );
+}