create-snapify-app 0.0.0-stage → 1.1.0

package/template/apps/marketplace/src/developer/DeveloperApp.tsx

@@ -0,0 +1,1266 @@
+/**
+ * Snapify Marketplace — Espace développeur pro
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ *
+ * Chrome aligné sur le backoffice CMS / superadmin : primitives admin,
+ * sidebar navy-950, canvas slate-50. Auth & API restent marketplace.
+ */
+import React, { useCallback, useEffect, useState } from 'react';
+import { Link, NavLink, Navigate, Route, Routes, useLocation, useNavigate, useParams } from 'react-router-dom';
+import {
+  AlertTriangle,
+  ArrowLeft,
+  BadgeCheck,
+  BarChart3,
+  CheckCircle2,
+  ChevronDown,
+  ExternalLink,
+  FileUp,
+  ImagePlus,
+  LayoutDashboard,
+  LogOut,
+  Menu as MenuIcon,
+  Package,
+  Settings,
+  ShoppingBag,
+  Trash2,
+  Upload,
+  Wallet,
+  X,
+  XCircle,
+} from 'lucide-react';
+import { api, ApiError } from '../../../shared/api';
+import { useAuth } from '../../../shared/AuthContext';
+import { DtInput, formatDt } from '../../../shared/ui';
+import { SnapifyMark } from '../../../../src/components/SnapifyLogo';
+import {
+  Alert,
+  Badge,
+  Button,
+  Card,
+  cx,
+  EmptyState,
+  ErrorState,
+  Field,
+  Input,
+  PageHeader,
+  PageSkeleton,
+  Section,
+  StatCard,
+  Table,
+  Td,
+  Textarea,
+  Th,
+} from '../../../../src/admin/ui/primitives';
+
+type Product = {
+  id: string;
+  slug: string;
+  name: string;
+  kind: 'module' | 'theme';
+  shortDesc: string;
+  longDesc: string;
+  category: string;
+  priceMillimes: number;
+  priceLabel: string;
+  status: string;
+  icon: string;
+  screenshots: string[];
+  salesCount: number;
+  rejectionReason?: string | null;
+  permissions?: string[];
+  engines?: { snapify: string };
+};
+
+function isMediaUrl(s: string) {
+  return /^https?:\/\//.test(s) || s.startsWith('/uploads/');
+}
+
+type CheckStatus = 'pass' | 'fail' | 'warn';
+
+type Validation = {
+  ok: boolean;
+  checks: { id: string; label: string; status: CheckStatus; detail?: string; group?: string }[];
+  manifest?: {
+    id: string;
+    version: string;
+    name: string;
+    description: string;
+    kind?: string;
+    pricing?: string;
+    icon?: string;
+    permissions?: string[];
+    engines?: { snapify: string };
+  };
+  signed: boolean;
+  fileCount: number;
+  size: number;
+  sha256: string;
+  errors: string[];
+  warnings: string[];
+  analysis?: { capabilities: string[]; envVars: string[]; hosts: string[]; files: { name: string; size: number }[] };
+};
+
+type DashData = {
+  publisher: { id: string; displayName: string; website: string | null; payoutIban: string | null; status: string; paidAt: string | null };
+  products: Product[];
+  earnings: { grossMillimes: number; netMillimes: number; commissionBps: number; salesCount: number };
+  stats: { draft: number; pending: number; published: number; rejected: number; productCount: number };
+  recentSales: { orderId: string; productName: string; unitPriceMillimes: number; netMillimes: number; paidAt: string | null; licenseKey: string }[];
+  payouts: { id: string; amountMillimes: number; status: string; period: string }[];
+};
+
+async function fileToBase64(file: File): Promise<string> {
+  const buf = new Uint8Array(await file.arrayBuffer());
+  let binary = '';
+  const chunk = 0x8000;
+  for (let i = 0; i < buf.length; i += chunk) binary += String.fromCharCode(...buf.subarray(i, i + chunk));
+  return btoa(binary);
+}
+
+async function uploadMedia(file: File): Promise<string> {
+  const imageBase64 = await fileToBase64(file);
+  const mime = file.type || 'image/png';
+  const res = await api<{ url: string }>('/api/marketplace/developer/media', {
+    method: 'POST',
+    body: JSON.stringify({ imageBase64, mime }),
+  });
+  return res.url;
+}
+
+const STATUS_TONE: Record<string, ['success' | 'warning' | 'danger' | 'neutral' | 'info', string]> = {
+  draft: ['neutral', 'Brouillon'],
+  pending: ['warning', 'En review'],
+  published: ['success', 'Publié'],
+  rejected: ['danger', 'Rejeté'],
+  active: ['success', 'Actif'],
+};
+
+function StatusPill({ status }: { status: string }) {
+  const [tone, label] = STATUS_TONE[status] || ['neutral', status];
+  return (
+    <Badge tone={tone} dot>
+      {label}
+    </Badge>
+  );
+}
+
+const CHECK_GROUPS = ['Paquet', 'Manifeste', 'Code', 'Permissions', 'Sécurité', 'Présentation', 'Marketplace'];
+
+function formatBytes(n: number) {
+  return n < 1024 ? `${n} o` : n < 1024 * 1024 ? `${(n / 1024).toFixed(1)} Ko` : `${(n / 1024 / 1024).toFixed(2)} Mo`;
+}
+
+function CheckIcon({ status }: { status: CheckStatus }) {
+  if (status === 'pass') return <CheckCircle2 className="h-4 w-4 text-emerald-600 shrink-0 mt-0.5" />;
+  if (status === 'warn') return <AlertTriangle className="h-4 w-4 text-amber-500 shrink-0 mt-0.5" />;
+  return <XCircle className="h-4 w-4 text-red-600 shrink-0 mt-0.5" />;
+}
+
+function CheckList({ validation }: { validation: Validation | null }) {
+  if (!validation) return null;
+  const count = (st: CheckStatus) => validation.checks.filter((c) => c.status === st).length;
+  const groups = [...CHECK_GROUPS, ...new Set(validation.checks.map((c) => c.group || 'Paquet'))]
+    .filter((g, i, all) => all.indexOf(g) === i)
+    .map((g) => ({ name: g, checks: validation.checks.filter((c) => (c.group || 'Paquet') === g) }))
+    .filter((g) => g.checks.length);
+  const worst = (checks: Validation['checks']): CheckStatus =>
+    checks.some((c) => c.status === 'fail') ? 'fail' : checks.some((c) => c.status === 'warn') ? 'warn' : 'pass';
+  const a = validation.analysis;
+  const label = { color: '#6c6c6c', fontSize: 12 } as const;
+  const chip = { fontFamily: 'monospace', fontSize: 11.5, background: '#eef2f7', borderRadius: 4, padding: '2px 6px' } as const;
+
+  return (
+    <div style={{ border: '1px solid #e5e7eb', borderRadius: 8, overflow: 'hidden', marginTop: 16 }}>
+      <div style={{ padding: '12px 16px', background: validation.ok ? '#ecfdf5' : '#fef2f2', display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center', fontWeight: 700 }}>
+        {validation.ok ? <CheckCircle2 className="h-5 w-5 text-emerald-600" /> : <XCircle className="h-5 w-5 text-red-600" />}
+        <span style={{ flex: 1, minWidth: 180 }}>
+          {validation.ok ? 'Analyse réussie — prêt à publier' : `Analyse : ${validation.errors.length} problème(s) à corriger`}
+        </span>
+        <span style={{ fontSize: 12, fontWeight: 600, color: '#475569' }}>
+          {count('pass')} réussi(s) · {count('warn')} avertissement(s) · {count('fail')} erreur(s)
+        </span>
+      </div>
+      {groups.map((g) => (
+        <details key={g.name} open={worst(g.checks) !== 'pass'} style={{ borderTop: '1px solid #f1f5f9' }}>
+          <summary style={{ display: 'flex', gap: 8, alignItems: 'center', padding: '10px 16px', cursor: 'pointer', fontSize: 13, fontWeight: 700, background: '#fafafa' }}>
+            <CheckIcon status={worst(g.checks)} />
+            <span style={{ flex: 1 }}>{g.name}</span>
+            <span style={{ fontWeight: 500, color: '#6c6c6c' }}>
+              {g.checks.filter((c) => c.status === 'pass').length}/{g.checks.length}
+            </span>
+          </summary>
+          <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
+            {g.checks.map((c, i) => (
+              <li key={`${c.id}-${i}`} style={{ display: 'flex', gap: 10, padding: '8px 16px 8px 40px', borderTop: '1px solid #f8fafc', fontSize: 13, alignItems: 'flex-start' }}>
+                <CheckIcon status={c.status} />
+                <div style={{ minWidth: 0 }}>
+                  <strong>{c.label}</strong>
+                  {c.detail && <div style={{ color: c.status === 'fail' ? '#b91c1c' : '#6c6c6c', overflowWrap: 'anywhere' }}>{c.detail}</div>}
+                </div>
+              </li>
+            ))}
+          </ul>
+        </details>
+      ))}
+      {validation.manifest && (
+        <div style={{ padding: 14, background: '#f8fafc', fontSize: 13, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 12, borderTop: '1px solid #e5e7eb' }}>
+          <div>
+            <div style={label}>Identifiant</div>
+            <div style={{ fontFamily: 'monospace', overflowWrap: 'anywhere' }}>{validation.manifest.id}</div>
+          </div>
+          <div>
+            <div style={label}>Version · compatibilité</div>
+            <div style={{ fontFamily: 'monospace' }}>
+              {validation.manifest.version} · {validation.manifest.engines?.snapify || '*'}
+            </div>
+          </div>
+          <div>
+            <div style={label}>Permissions demandées</div>
+            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, marginTop: 2 }}>
+              {(validation.manifest.permissions || []).length ? validation.manifest.permissions!.map((p) => <span key={p} style={chip}>{p}</span>) : '—'}
+            </div>
+          </div>
+          {a && a.capabilities.length > 0 && (
+            <div>
+              <div style={label}>Utilisées par le code serveur</div>
+              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, marginTop: 2 }}>
+                {a.capabilities.map((p) => <span key={p} style={chip}>{p}</span>)}
+              </div>
+            </div>
+          )}
+          {a && a.files.length > 0 && (
+            <div>
+              <div style={label}>Code analysé · paquet de {formatBytes(validation.size)}</div>
+              {a.files.map((f) => (
+                <div key={f.name} style={{ display: 'flex', justifyContent: 'space-between', gap: 8, fontFamily: 'monospace', fontSize: 12 }}>
+                  <span>{f.name}</span>
+                  <span style={{ color: '#6c6c6c' }}>{formatBytes(f.size)}</span>
+                </div>
+              ))}
+            </div>
+          )}
+          <div>
+            <div style={label}>SHA-256</div>
+            <div style={{ fontFamily: 'monospace', fontSize: 11, wordBreak: 'break-all' }}>{validation.sha256.slice(0, 32)}…</div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+const DEV_NAV = [
+  { to: '/developer/dashboard', end: true, icon: LayoutDashboard, label: 'Vue d’ensemble' },
+  { to: '/developer/dashboard/products', end: false, icon: Package, label: 'Mes produits' },
+  { to: '/developer/dashboard/upload', end: true, icon: Upload, label: 'Uploader un paquet' },
+  { to: '/developer/dashboard/sales', end: true, icon: ShoppingBag, label: 'Ventes & payouts' },
+  { to: '/developer/dashboard/settings', end: true, icon: Settings, label: 'Profil éditeur' },
+];
+
+function DevSidebar({
+  data,
+  onNavigate,
+  onLogout,
+}: {
+  data: DashData;
+  onNavigate?: () => void;
+  onLogout: () => void;
+}) {
+  const { user } = useAuth();
+  return (
+    <div className="flex h-full flex-col bg-navy-950 text-slate-300">
+      <div className="flex h-16 shrink-0 items-center gap-3 px-5">
+        <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-brand-600">
+          <SnapifyMark className="h-6 w-6" accent="#FFFFFF" />
+        </div>
+        <div className="min-w-0 leading-tight">
+          <p className="truncate text-sm font-semibold text-white">Snapify</p>
+          <p className="text-[11px] text-slate-500">Espace développeur</p>
+        </div>
+      </div>
+      <div className="border-b border-white/5 px-5 py-3">
+        <p className="truncate text-[13px] font-medium text-white">{data.publisher.displayName}</p>
+        <p className="truncate text-[11px] text-slate-500">{user?.email}</p>
+      </div>
+      <nav className="flex-1 space-y-0.5 overflow-y-auto px-3 py-4 scrollbar-thin">
+        {DEV_NAV.map((item) => (
+          <NavLink
+            key={item.to}
+            to={item.to}
+            end={item.end}
+            onClick={onNavigate}
+            className={({ isActive }) =>
+              cx('group flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition', isActive ? 'bg-white/10 font-medium text-white' : 'text-slate-400 hover:bg-white/5 hover:text-slate-100')
+            }
+          >
+            {({ isActive }) => (
+              <>
+                <item.icon className={cx('h-4 w-4 shrink-0', isActive ? 'text-brand-400' : 'text-slate-500 group-hover:text-slate-300')} />
+                {item.label}
+              </>
+            )}
+          </NavLink>
+        ))}
+      </nav>
+      <div className="space-y-0.5 border-t border-white/5 p-3">
+        <a
+          href="https://developers.snapify.tn"
+          target="_blank"
+          rel="noreferrer"
+          className="flex items-center justify-between rounded-lg px-3 py-2 text-sm text-slate-400 transition hover:bg-white/5 hover:text-white"
+        >
+          Documentation <ExternalLink className="h-3.5 w-3.5" />
+        </a>
+        <Link to="/" onClick={onNavigate} className="flex items-center rounded-lg px-3 py-2 text-sm text-slate-400 transition hover:bg-white/5 hover:text-white">
+          ← Marketplace
+        </Link>
+        <button
+          type="button"
+          onClick={onLogout}
+          className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-slate-400 transition hover:bg-white/5 hover:text-white"
+        >
+          <LogOut className="h-3.5 w-3.5" /> Déconnexion
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function DevShell({ children, data }: { children: React.ReactNode; data: DashData }) {
+  const { logout } = useAuth();
+  const location = useLocation();
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+  useEffect(() => {
+    setMobileOpen(false);
+    setMenuOpen(false);
+  }, [location.pathname]);
+
+  const current = DEV_NAV.filter((n) => (n.end ? location.pathname === n.to : location.pathname.startsWith(n.to))).sort((a, b) => b.to.length - a.to.length)[0];
+  useEffect(() => {
+    document.title = `${current?.label || 'Dashboard'} · Développeur Snapify`;
+  }, [current]);
+
+  const doLogout = () => void logout();
+
+  return (
+    <div className="mp-dev min-h-screen bg-slate-50">
+      <aside className="fixed inset-y-0 left-0 z-30 hidden w-64 lg:block">
+        <DevSidebar data={data} onLogout={doLogout} />
+      </aside>
+      {mobileOpen ? (
+        <div className="fixed inset-0 z-50 lg:hidden">
+          <div className="absolute inset-0 bg-slate-900/50" onClick={() => setMobileOpen(false)} />
+          <div className="absolute inset-y-0 left-0 w-72 shadow-2xl">
+            <DevSidebar data={data} onNavigate={() => setMobileOpen(false)} onLogout={doLogout} />
+            <button type="button" onClick={() => setMobileOpen(false)} className="absolute right-3 top-4 rounded-lg p-1.5 text-slate-400 hover:bg-white/10" aria-label="Fermer le menu">
+              <X className="h-5 w-5" />
+            </button>
+          </div>
+        </div>
+      ) : null}
+
+      <div className="lg:pl-64">
+        <header className="sticky top-0 z-20 flex h-16 items-center gap-3 border-b border-slate-200/80 bg-white/85 px-4 backdrop-blur sm:px-6">
+          <Button variant="ghost" size="icon" className="lg:hidden" onClick={() => setMobileOpen(true)} aria-label="Ouvrir le menu">
+            <MenuIcon className="h-5 w-5" />
+          </Button>
+          <div className="min-w-0 text-sm">
+            <span className="text-slate-400">Développeur</span>
+            <span className="mx-1.5 text-slate-300">/</span>
+            <span className="font-medium text-slate-800">{current?.label || 'Tableau de bord'}</span>
+          </div>
+          <div className="ml-auto flex items-center gap-2">
+            <a href="https://developers.snapify.tn" target="_blank" rel="noreferrer" className="hidden sm:block">
+              <Button size="sm" icon={ExternalLink}>
+                Docs
+              </Button>
+            </a>
+            <div className="relative">
+              <button type="button" onClick={() => setMenuOpen((v) => !v)} className="flex items-center gap-2 rounded-lg py-1 pl-1 pr-2 transition hover:bg-slate-100">
+                <span className="flex h-8 w-8 items-center justify-center rounded-full bg-navy-900 text-xs font-semibold text-white">
+                  {data.publisher.displayName.slice(0, 2).toUpperCase()}
+                </span>
+                <span className="hidden text-left leading-tight md:block">
+                  <span className="block max-w-[140px] truncate text-[13px] font-medium text-slate-800">{data.publisher.displayName}</span>
+                  <span className="block text-[11px] text-slate-500">Éditeur</span>
+                </span>
+                <ChevronDown className="h-4 w-4 text-slate-400" />
+              </button>
+              {menuOpen ? (
+                <div className="absolute right-0 mt-1 w-48 rounded-xl border border-slate-200 bg-white py-1 shadow-lg ring-1 ring-slate-900/5">
+                  <Link to="/developer/dashboard/settings" className="block px-3 py-2 text-sm text-slate-700 hover:bg-slate-50" onClick={() => setMenuOpen(false)}>
+                    Profil éditeur
+                  </Link>
+                  <button type="button" className="block w-full px-3 py-2 text-left text-sm text-slate-700 hover:bg-slate-50" onClick={doLogout}>
+                    Déconnexion
+                  </button>
+                </div>
+              ) : null}
+            </div>
+          </div>
+        </header>
+        <main className="mp-dev-main px-4 py-6 sm:px-6 lg:px-8 lg:py-8">{children}</main>
+      </div>
+    </div>
+  );
+}
+
+function Overview({ data }: { data: DashData }) {
+  return (
+    <div>
+      <PageHeader
+        title="Vue d’ensemble"
+        description={`Tableau de bord vendeur — commission ${(data.earnings.commissionBps / 100).toFixed(0)} %`}
+        actions={
+          <Link to="/developer/dashboard/upload">
+            <Button variant="secondary" icon={Upload}>
+              Nouvel upload
+            </Button>
+          </Link>
+        }
+      />
+      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+        <StatCard label="Revenu brut" value={formatDt(data.earnings.grossMillimes)} icon={Wallet} tone="brand" />
+        <StatCard label="Revenu net" value={formatDt(data.earnings.netMillimes)} icon={BarChart3} tone="sky" />
+        <StatCard label="Ventes" value={String(data.earnings.salesCount)} icon={ShoppingBag} tone="violet" />
+        <StatCard label="Produits" value={String(data.stats.productCount)} icon={Package} tone="amber" />
+      </div>
+      <div className="mt-4 grid gap-4 lg:grid-cols-2">
+        <Section
+          title="Pipeline"
+          description="Statut de publication de vos paquets"
+          actions={
+            <Link to="/developer/dashboard/products">
+              <Button size="sm">Gérer les produits</Button>
+            </Link>
+          }
+        >
+          <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+            {[
+              ['Brouillons', data.stats.draft],
+              ['Review', data.stats.pending],
+              ['Publiés', data.stats.published],
+              ['Rejetés', data.stats.rejected],
+            ].map(([l, n]) => (
+              <div key={String(l)} className="rounded-lg bg-slate-50 px-3 py-4 text-center">
+                <div className="text-2xl font-semibold tabular-nums text-slate-900">{n}</div>
+                <div className="mt-0.5 text-[11px] font-medium uppercase tracking-wide text-slate-500">{l}</div>
+              </div>
+            ))}
+          </div>
+        </Section>
+        <Section title="Dernières ventes" description="Les 5 plus récentes">
+          {data.recentSales.length === 0 ? (
+            <EmptyState icon={ShoppingBag} title="Aucune vente" description="Vos ventes apparaîtront ici dès la première commande." />
+          ) : (
+            <ul className="divide-y divide-slate-100">
+              {data.recentSales.slice(0, 5).map((s, i) => (
+                <li key={i} className="flex items-center justify-between gap-3 py-2.5 text-sm">
+                  <span className="truncate text-slate-700">{s.productName}</span>
+                  <strong className="shrink-0 tabular-nums text-slate-900">{formatDt(s.netMillimes)}</strong>
+                </li>
+              ))}
+            </ul>
+          )}
+        </Section>
+      </div>
+    </div>
+  );
+}
+
+function ProductsList({ data }: { data: DashData; refresh: () => void }) {
+  const nav = useNavigate();
+  return (
+    <div>
+      <PageHeader
+        title="Mes produits"
+        description="Profils d’apps, versions et publication"
+        actions={
+          <Link to="/developer/dashboard/upload">
+            <Button variant="secondary" icon={FileUp}>
+              Uploader
+            </Button>
+          </Link>
+        }
+      />
+      <Card padded={false}>
+        {!data.products.length ? (
+          <EmptyState
+            icon={Package}
+            title="Aucun produit"
+            description="Uploadez votre premier paquet .snapmod ou .snaptheme."
+            action={
+              <Link to="/developer/dashboard/upload">
+                <Button variant="secondary" icon={Upload}>
+                  Uploader un paquet
+                </Button>
+              </Link>
+            }
+          />
+        ) : (
+          <Table>
+            <thead>
+              <tr>
+                <Th>Produit</Th>
+                <Th>Type</Th>
+                <Th>Prix</Th>
+                <Th>Statut</Th>
+                <Th>Ventes</Th>
+                <Th />
+              </tr>
+            </thead>
+            <tbody>
+              {data.products.map((p) => (
+                <tr key={p.id}>
+                  <Td>
+                    <div className="flex items-center gap-3">
+                      {isMediaUrl(p.icon) ? (
+                        <img src={p.icon} alt="" className="h-10 w-10 rounded-lg border border-slate-200 object-cover" />
+                      ) : (
+                        <div className="grid h-10 w-10 place-items-center rounded-lg bg-slate-100">
+                          <Package className="h-4 w-4 text-slate-400" />
+                        </div>
+                      )}
+                      <div className="min-w-0">
+                        <p className="truncate font-medium text-slate-900">{p.name}</p>
+                        <p className="truncate font-mono text-xs text-slate-500">{p.slug}</p>
+                      </div>
+                    </div>
+                  </Td>
+                  <Td className="capitalize">{p.kind}</Td>
+                  <Td>{p.priceLabel}</Td>
+                  <Td>
+                    <StatusPill status={p.status} />
+                  </Td>
+                  <Td className="tabular-nums">{p.salesCount}</Td>
+                  <Td className="text-right">
+                    <Button size="sm" onClick={() => nav(`/developer/dashboard/products/${p.id}`)}>
+                      Profil
+                    </Button>
+                  </Td>
+                </tr>
+              ))}
+            </tbody>
+          </Table>
+        )}
+      </Card>
+    </div>
+  );
+}
+
+function ProductProfile({ refresh }: { refresh: () => void }) {
+  const { id } = useParams();
+  const nav = useNavigate();
+  const [product, setProduct] = useState<Product | null>(null);
+  const [versions, setVersions] = useState<
+    { id: string; version: string; changelog: string; size: number; signed: boolean; sha256: string; validationReport?: Validation; moduleId?: string | null; createdAt: string }[]
+  >([]);
+  const [form, setForm] = useState({
+    name: '',
+    shortDesc: '',
+    longDesc: '',
+    category: '',
+    priceMillimes: 0,
+    icon: '',
+    screenshots: [] as string[],
+  });
+  const [msg, setMsg] = useState('');
+  const [file, setFile] = useState<File | null>(null);
+  const [changelog, setChangelog] = useState('');
+  const [validation, setValidation] = useState<Validation | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [mediaBusy, setMediaBusy] = useState(false);
+
+  const load = useCallback(async () => {
+    const d = await api<{ product: Product; versions: typeof versions }>(`/api/marketplace/developer/products/${id}`);
+    setProduct(d.product);
+    setVersions(d.versions);
+    setForm({
+      name: d.product.name,
+      shortDesc: d.product.shortDesc,
+      longDesc: d.product.longDesc,
+      category: d.product.category,
+      priceMillimes: d.product.priceMillimes,
+      icon: d.product.icon || '',
+      screenshots: Array.isArray(d.product.screenshots) ? d.product.screenshots : [],
+    });
+  }, [id]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  const saveProfile = async (extra?: Partial<typeof form>) => {
+    if (!product) return;
+    const body = { ...form, ...extra };
+    await api(`/api/marketplace/developer/products/${product.id}`, { method: 'PATCH', body: JSON.stringify(body) });
+    setMsg('Profil enregistré');
+    void load();
+    refresh();
+  };
+
+  if (!product) return <PageSkeleton />;
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => nav('/developer/dashboard/products')}
+        className="mb-3 inline-flex items-center gap-1.5 text-[13px] text-slate-500 transition hover:text-slate-800"
+      >
+        <ArrowLeft className="h-3.5 w-3.5" /> Produits
+      </button>
+      <PageHeader
+        title={
+          <span className="flex items-center gap-3">
+            {isMediaUrl(form.icon) ? (
+              <img src={form.icon} alt="" className="h-12 w-12 rounded-xl border border-slate-200 object-cover" />
+            ) : (
+              <span className="grid h-12 w-12 place-items-center rounded-xl bg-slate-100 text-[10px] font-semibold uppercase text-slate-500">{product.kind}</span>
+            )}
+            {product.name}
+          </span>
+        }
+        description={
+          <span className="inline-flex flex-wrap items-center gap-2">
+            <StatusPill status={product.status} />
+            <span className="font-mono text-xs">{product.slug}</span>
+          </span>
+        }
+        actions={
+          <>
+            {product.status === 'published' ? (
+              <Link to={`/product/${product.slug}`}>
+                <Button icon={ExternalLink}>Voir sur le store</Button>
+              </Link>
+            ) : null}
+            {product.status === 'draft' || product.status === 'rejected' ? (
+              <Button
+                variant="secondary"
+                onClick={async () => {
+                  if (!versions.length) return setMsg('Uploadez au moins une version avant de soumettre');
+                  if (!isMediaUrl(form.icon)) return setMsg('Ajoutez une icône (image) avant de soumettre');
+                  if (form.screenshots.length < 1) return setMsg('Ajoutez au moins une capture d’écran');
+                  await api(`/api/marketplace/developer/products/${product.id}`, { method: 'PATCH', body: JSON.stringify({ ...form, submit: true }) });
+                  setMsg('Soumis pour validation Snapify');
+                  void load();
+                  refresh();
+                }}
+              >
+                Soumettre pour review
+              </Button>
+            ) : null}
+          </>
+        }
+      />
+      {product.rejectionReason ? (
+        <div className="mb-4">
+          <Alert tone="danger" title="Rejeté">
+            {product.rejectionReason}
+          </Alert>
+        </div>
+      ) : null}
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1.15fr 0.85fr', gap: 16, marginTop: 20 }}>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+          <div style={{ background: '#fff', border: '1px solid #e5e7eb', borderRadius: 8, padding: 20 }}>
+            <h2 style={{ marginTop: 0, fontSize: 15 }}>Profil de l’application</h2>
+            <p style={{ fontSize: 13, color: '#6c6c6c', marginTop: 0 }}>Comme sur PrestaShop Addons : fiche complète visible sur le store.</p>
+            <label style={{ display: 'block', fontSize: 13, fontWeight: 600, marginTop: 10 }}>
+              Nom
+              <input className="mp-input" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
+            </label>
+            <label style={{ display: 'block', fontSize: 13, fontWeight: 600, marginTop: 10 }}>
+              Catégorie
+              <input className="mp-input" value={form.category} onChange={(e) => setForm({ ...form, category: e.target.value })} />
+            </label>
+            <label style={{ display: 'block', fontSize: 13, fontWeight: 600, marginTop: 10 }}>
+              Prix (0 = gratuit)
+              <DtInput millimes={form.priceMillimes} onMillimes={(m) => setForm({ ...form, priceMillimes: m })} />
+            </label>
+            <label style={{ display: 'block', fontSize: 13, fontWeight: 600, marginTop: 10 }}>
+              Description courte
+              <textarea className="mp-input" rows={2} value={form.shortDesc} onChange={(e) => setForm({ ...form, shortDesc: e.target.value })} />
+            </label>
+            <label style={{ display: 'block', fontSize: 13, fontWeight: 600, marginTop: 10 }}>
+              Description longue (HTML)
+              <textarea className="mp-input" rows={6} value={form.longDesc} onChange={(e) => setForm({ ...form, longDesc: e.target.value })} />
+            </label>
+            <button type="button" className="btn-mp" style={{ marginTop: 14 }} onClick={() => void saveProfile()}>
+              Enregistrer le profil
+            </button>
+            {product.permissions && product.permissions.length > 0 && (
+              <div style={{ marginTop: 16, fontSize: 13 }}>
+                <strong>Permissions</strong>
+                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 6 }}>
+                  {product.permissions.map((p) => (
+                    <span key={p} style={{ background: '#f1f5f9', padding: '4px 8px', borderRadius: 4, fontFamily: 'monospace', fontSize: 11 }}>
+                      {p}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+
+          <div style={{ background: '#fff', border: '1px solid #e5e7eb', borderRadius: 8, padding: 20 }}>
+            <h2 style={{ marginTop: 0, fontSize: 15 }}>Icône du module / thème</h2>
+            <p style={{ fontSize: 13, color: '#6c6c6c', marginTop: 0 }}>PNG/JPG/WebP · carré recommandé 512×512 · max 5 Mo</p>
+            <div style={{ display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
+              {isMediaUrl(form.icon) ? <img src={form.icon} alt="Icône" className="mp-dev-icon-preview" /> : <div className="mp-dev-icon-fallback">Pas d’icône</div>}
+              <div>
+                <label className="btn-mp" style={{ cursor: mediaBusy ? 'wait' : 'pointer' }}>
+                  <ImagePlus className="h-4 w-4" /> {mediaBusy ? 'Upload…' : 'Choisir une image'}
+                  <input
+                    type="file"
+                    accept="image/png,image/jpeg,image/webp,image/gif"
+                    hidden
+                    disabled={mediaBusy}
+                    onChange={async (e) => {
+                      const f = e.target.files?.[0];
+                      e.target.value = '';
+                      if (!f) return;
+                      setMediaBusy(true);
+                      setMsg('');
+                      try {
+                        const url = await uploadMedia(f);
+                        setForm((prev) => ({ ...prev, icon: url }));
+                        await api(`/api/marketplace/developer/products/${product.id}`, {
+                          method: 'PATCH',
+                          body: JSON.stringify({ icon: url }),
+                        });
+                        setMsg('Icône mise à jour');
+                        refresh();
+                      } catch (err) {
+                        setMsg(err instanceof ApiError ? err.message : 'Erreur upload icône');
+                      } finally {
+                        setMediaBusy(false);
+                      }
+                    }}
+                  />
+                </label>
+                {isMediaUrl(form.icon) && (
+                  <button
+                    type="button"
+                    className="mp-btn-ghost"
+                    style={{ width: 'auto', padding: '0 14px', marginTop: 8, display: 'inline-flex', alignItems: 'center', gap: 6 }}
+                    onClick={async () => {
+                      setForm((prev) => ({ ...prev, icon: 'package' }));
+                      await api(`/api/marketplace/developer/products/${product.id}`, {
+                        method: 'PATCH',
+                        body: JSON.stringify({ icon: 'package' }),
+                      });
+                      setMsg('Icône retirée');
+                      refresh();
+                    }}
+                  >
+                    <Trash2 className="h-3.5 w-3.5" /> Retirer
+                  </button>
+                )}
+              </div>
+            </div>
+          </div>
+
+          <div style={{ background: '#fff', border: '1px solid #e5e7eb', borderRadius: 8, padding: 20 }}>
+            <h2 style={{ marginTop: 0, fontSize: 15 }}>Captures d’écran</h2>
+            <p style={{ fontSize: 13, color: '#6c6c6c', marginTop: 0 }}>Jusqu’à 8 images · affichées en galerie sur la fiche produit</p>
+            <div className="mp-dev-media-grid">
+              {form.screenshots.map((url, i) => (
+                <div key={`${url}-${i}`} className="mp-dev-shot">
+                  <img src={url} alt={`Capture ${i + 1}`} />
+                  <button
+                    type="button"
+                    title="Supprimer"
+                    onClick={async () => {
+                      const next = form.screenshots.filter((_, j) => j !== i);
+                      setForm((prev) => ({ ...prev, screenshots: next }));
+                      await api(`/api/marketplace/developer/products/${product.id}`, {
+                        method: 'PATCH',
+                        body: JSON.stringify({ screenshots: next }),
+                      });
+                      setMsg('Capture retirée');
+                      refresh();
+                    }}
+                  >
+                    ×
+                  </button>
+                </div>
+              ))}
+              {form.screenshots.length < 8 && (
+                <label
+                  className="mp-dev-shot"
+                  style={{ display: 'grid', placeItems: 'center', cursor: mediaBusy ? 'wait' : 'pointer', borderStyle: 'dashed' }}
+                >
+                  <span style={{ textAlign: 'center', fontSize: 12, color: '#6c6c6c', fontWeight: 600 }}>
+                    <ImagePlus className="mx-auto mb-1 h-5 w-5" />
+                    {mediaBusy ? 'Upload…' : 'Ajouter'}
+                  </span>
+                  <input
+                    type="file"
+                    accept="image/png,image/jpeg,image/webp,image/gif"
+                    hidden
+                    disabled={mediaBusy}
+                    onChange={async (e) => {
+                      const f = e.target.files?.[0];
+                      e.target.value = '';
+                      if (!f) return;
+                      setMediaBusy(true);
+                      setMsg('');
+                      try {
+                        const url = await uploadMedia(f);
+                        const next = [...form.screenshots, url].slice(0, 8);
+                        setForm((prev) => ({ ...prev, screenshots: next }));
+                        await api(`/api/marketplace/developer/products/${product.id}`, {
+                          method: 'PATCH',
+                          body: JSON.stringify({ screenshots: next }),
+                        });
+                        setMsg('Capture ajoutée');
+                        refresh();
+                      } catch (err) {
+                        setMsg(err instanceof ApiError ? err.message : 'Erreur upload');
+                      } finally {
+                        setMediaBusy(false);
+                      }
+                    }}
+                  />
+                </label>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <div style={{ background: '#fff', border: '1px solid #e5e7eb', borderRadius: 8, padding: 20 }}>
+            <h2 style={{ marginTop: 0, fontSize: 15 }}>Nouvelle version</h2>
+            <p style={{ fontSize: 13, color: '#6c6c6c' }}>Le paquet est analysé automatiquement : intégrité, compatibilité, code, permissions, sécurité et numéro de version.</p>
+            <input
+              type="file"
+              accept=".snapmod,.snaptheme"
+              onChange={async (e) => {
+                const f = e.target.files?.[0] || null;
+                setFile(f);
+                setValidation(null);
+                if (!f) return;
+                setBusy(true);
+                try {
+                  const packageBase64 = await fileToBase64(f);
+                  const res = await api<{ validation: Validation }>('/api/marketplace/developer/validate-package', {
+                    method: 'POST',
+                    body: JSON.stringify({ packageBase64, productId: product.id }),
+                  });
+                  setValidation(res.validation);
+                } catch (err) {
+                  setMsg(err instanceof ApiError ? err.message : 'Erreur validation');
+                } finally {
+                  setBusy(false);
+                }
+              }}
+            />
+            <label style={{ display: 'block', fontSize: 13, fontWeight: 600, marginTop: 10 }}>
+              Changelog
+              <textarea className="mp-input" rows={3} value={changelog} onChange={(e) => setChangelog(e.target.value)} placeholder="Nouveautés de cette version…" />
+            </label>
+            <CheckList validation={validation} />
+            <button
+              type="button"
+              className="btn-mp"
+              style={{ marginTop: 12, width: '100%' }}
+              disabled={!file || busy || (validation !== null && !validation.ok)}
+              onClick={async () => {
+                if (!file) return;
+                setBusy(true);
+                try {
+                  const packageBase64 = await fileToBase64(file);
+                  const res = await api<{ validation: Validation }>(`/api/marketplace/developer/products/${product.id}/versions`, {
+                    method: 'POST',
+                    body: JSON.stringify({ packageBase64, changelog }),
+                  });
+                  setValidation(res.validation);
+                  setMsg(`Version ${res.validation.manifest?.version || ''} uploadée`);
+                  setFile(null);
+                  setChangelog('');
+                  void load();
+                  refresh();
+                } catch (err) {
+                  setMsg(err instanceof ApiError ? err.message : 'Erreur upload');
+                } finally {
+                  setBusy(false);
+                }
+              }}
+            >
+              {busy ? 'Traitement…' : 'Valider & enregistrer la version'}
+            </button>
+          </div>
+
+          <div style={{ background: '#fff', border: '1px solid #e5e7eb', borderRadius: 8, padding: 20, marginTop: 14 }}>
+            <h2 style={{ marginTop: 0, fontSize: 15 }}>Historique des versions</h2>
+            {versions.map((v) => (
+              <div key={v.id} style={{ borderTop: '1px solid #f1f5f9', padding: '12px 0', fontSize: 13 }}>
+                <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8 }}>
+                  <strong>v{v.version}</strong>
+                  <span style={{ color: '#6c6c6c' }}>{new Date(v.createdAt).toLocaleString('fr-TN')}</span>
+                </div>
+                <div style={{ color: '#6c6c6c', marginTop: 4 }}>{v.changelog || '—'}</div>
+                <div style={{ marginTop: 6, display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
+                  {v.signed ? (
+                    <span style={{ color: '#047857', display: 'inline-flex', gap: 4, alignItems: 'center' }}>
+                      <BadgeCheck className="h-3.5 w-3.5" /> Signé
+                    </span>
+                  ) : (
+                    <span style={{ color: '#b45309' }}>Non signé</span>
+                  )}
+                  <span style={{ fontFamily: 'monospace', fontSize: 11 }}>{(v.size / 1024).toFixed(1)} Ko</span>
+                  {v.moduleId && <span style={{ fontFamily: 'monospace', fontSize: 11 }}>{v.moduleId}</span>}
+                </div>
+              </div>
+            ))}
+            {!versions.length && <div style={{ color: '#6c6c6c' }}>Aucune version.</div>}
+          </div>
+        </div>
+      </div>
+      {msg && <p style={{ color: '#00a89d', marginTop: 12 }}>{msg}</p>}
+    </div>
+  );
+}
+
+function UploadWizard({ refresh }: { refresh: () => void }) {
+  const nav = useNavigate();
+  const [file, setFile] = useState<File | null>(null);
+  const [validation, setValidation] = useState<Validation | null>(null);
+  const [category, setCategory] = useState('Autres');
+  const [priceMillimes, setPriceMillimes] = useState(0);
+  const [changelog, setChangelog] = useState('Version initiale');
+  const [busy, setBusy] = useState(false);
+  const [drag, setDrag] = useState(false);
+  const [msg, setMsg] = useState('');
+
+  const runValidate = async (f: File) => {
+    setFile(f);
+    setBusy(true);
+    setMsg('');
+    try {
+      const packageBase64 = await fileToBase64(f);
+      const res = await api<{ validation: Validation }>('/api/marketplace/developer/validate-package', {
+        method: 'POST',
+        body: JSON.stringify({ packageBase64 }),
+      });
+      setValidation(res.validation);
+      if (res.validation.manifest?.pricing === 'paid' && priceMillimes === 0) setPriceMillimes(49_000);
+      if (res.validation.manifest?.pricing === 'free') setPriceMillimes(0);
+    } catch (e) {
+      setValidation(null);
+      setMsg(e instanceof ApiError ? e.message : 'Erreur');
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="max-w-3xl">
+      <PageHeader
+        title="Uploader un paquet"
+        description={
+          <>
+            Déposez un fichier <code className="rounded bg-slate-100 px-1 font-mono text-[13px]">.snapmod</code> ou{' '}
+            <code className="rounded bg-slate-100 px-1 font-mono text-[13px]">.snaptheme</code>. Analyse automatique avant création — le code n’est jamais exécuté.
+          </>
+        }
+      />
+
+      <Card
+        className={cx('border-2 border-dashed text-center transition', drag ? 'border-brand-500 bg-brand-50' : 'border-slate-200')}
+        padded={false}
+      >
+        <div
+          className="px-6 py-12"
+          onDragOver={(e) => {
+            e.preventDefault();
+            setDrag(true);
+          }}
+          onDragLeave={() => setDrag(false)}
+          onDrop={(e) => {
+            e.preventDefault();
+            setDrag(false);
+            const f = e.dataTransfer.files?.[0];
+            if (f) void runValidate(f);
+          }}
+        >
+          <Upload className="mx-auto h-10 w-10 text-brand-600 opacity-80" />
+          <p className="mt-3 text-[15px] font-semibold text-slate-900">Glissez-déposez votre paquet ici</p>
+          <p className="mt-1 text-sm text-slate-500">ou</p>
+          <label className="mt-3 inline-flex cursor-pointer">
+            <span className="inline-flex h-9 items-center rounded-lg bg-navy-900 px-3.5 text-sm font-medium text-white shadow-sm hover:bg-navy-800">Choisir un fichier</span>
+            <input
+              type="file"
+              accept=".snapmod,.snaptheme"
+              hidden
+              onChange={(e) => {
+                const f = e.target.files?.[0];
+                if (f) void runValidate(f);
+              }}
+            />
+          </label>
+          {file ? (
+            <p className="mt-3 text-sm text-slate-500">
+              {file.name} · {(file.size / 1024).toFixed(1)} Ko {busy ? '· Analyse…' : ''}
+            </p>
+          ) : null}
+        </div>
+      </Card>
+
+      <CheckList validation={validation} />
+
+      {validation?.ok && validation.manifest ? (
+        <div className="mt-4">
+          <Section
+            title="Créer le produit sur la marketplace"
+            description={
+              <>
+                <strong>{validation.manifest.name}</strong> — {validation.manifest.id}@{validation.manifest.version}
+              </>
+            }
+          >
+            <div className="grid gap-4 sm:grid-cols-2">
+              <Field label="Catégorie">
+                <Input value={category} onChange={(e) => setCategory(e.target.value)} />
+              </Field>
+              <Field label="Prix (0 = gratuit)">
+                <DtInput millimes={priceMillimes} onMillimes={setPriceMillimes} />
+              </Field>
+            </div>
+            <Field label="Changelog">
+              <Textarea rows={2} value={changelog} onChange={(e) => setChangelog(e.target.value)} />
+            </Field>
+            <Button
+              variant="secondary"
+              loading={busy}
+              onClick={async () => {
+                if (!file) return;
+                setBusy(true);
+                try {
+                  const packageBase64 = await fileToBase64(file);
+                  const res = await api<{ product: Product }>('/api/marketplace/developer/products/from-package', {
+                    method: 'POST',
+                    body: JSON.stringify({ packageBase64, category, priceMillimes, changelog }),
+                  });
+                  refresh();
+                  nav(`/developer/dashboard/products/${res.product.id}`);
+                } catch (e) {
+                  setMsg(e instanceof ApiError ? e.message : 'Erreur');
+                } finally {
+                  setBusy(false);
+                }
+              }}
+            >
+              Créer le produit + version
+            </Button>
+          </Section>
+        </div>
+      ) : null}
+      {msg ? (
+        <div className="mt-4">
+          <Alert tone="danger">{msg}</Alert>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function SalesPage({ data }: { data: DashData }) {
+  const [amount, setAmount] = useState(50_000);
+  const [msg, setMsg] = useState('');
+  const [busy, setBusy] = useState(false);
+  return (
+    <div>
+      <PageHeader
+        title="Ventes & payouts"
+        description={
+          <>
+            Net disponible estimé : <strong className="text-slate-800">{formatDt(data.earnings.netMillimes)}</strong>
+          </>
+        }
+      />
+      <div className="grid gap-4 lg:grid-cols-[1fr_360px]">
+        <Card padded={false}>
+          {!data.recentSales.length ? (
+            <EmptyState icon={ShoppingBag} title="Pas encore de ventes" description="Les commandes de vos produits apparaîtront ici." />
+          ) : (
+            <Table>
+              <thead>
+                <tr>
+                  <Th>Produit</Th>
+                  <Th>Brut</Th>
+                  <Th>Net</Th>
+                  <Th>Date</Th>
+                  <Th>Licence</Th>
+                </tr>
+              </thead>
+              <tbody>
+                {data.recentSales.map((s, i) => (
+                  <tr key={i}>
+                    <Td>{s.productName}</Td>
+                    <Td className="tabular-nums">{formatDt(s.unitPriceMillimes)}</Td>
+                    <Td className="tabular-nums font-medium">{formatDt(s.netMillimes)}</Td>
+                    <Td className="text-slate-500">{s.paidAt ? new Date(s.paidAt).toLocaleString('fr-TN') : '—'}</Td>
+                    <Td className="font-mono text-xs">{s.licenseKey}</Td>
+                  </tr>
+                ))}
+              </tbody>
+            </Table>
+          )}
+        </Card>
+        <Section title="Demander un payout" description="Minimum 10 DT · virement sur l’IBAN du profil">
+          <Field label="Montant">
+            <DtInput millimes={amount} onMillimes={setAmount} />
+          </Field>
+          <Button
+            variant="secondary"
+            loading={busy}
+            className="w-full justify-center"
+            onClick={async () => {
+              setBusy(true);
+              setMsg('');
+              try {
+                await api('/api/marketplace/developer/payouts', { method: 'POST', body: JSON.stringify({ amountMillimes: amount }) });
+                setMsg('Demande envoyée');
+              } catch (e) {
+                setMsg(e instanceof ApiError ? e.message : 'Erreur');
+              } finally {
+                setBusy(false);
+              }
+            }}
+          >
+            Envoyer la demande
+          </Button>
+          {msg ? <Alert tone={msg === 'Demande envoyée' ? 'success' : 'danger'}>{msg}</Alert> : null}
+          {data.payouts.length > 0 ? (
+            <ul className="space-y-2 text-[13px] text-slate-600">
+              {data.payouts.map((p) => (
+                <li key={p.id} className="flex justify-between gap-2 border-t border-slate-100 pt-2">
+                  <span>{formatDt(p.amountMillimes)}</span>
+                  <span className="text-slate-500">
+                    {p.status} · {p.period}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          ) : null}
+        </Section>
+      </div>
+    </div>
+  );
+}
+
+function PublisherSettings({ data, refresh }: { data: DashData; refresh: () => void }) {
+  const [displayName, setDisplayName] = useState(data.publisher.displayName);
+  const [website, setWebsite] = useState(data.publisher.website || '');
+  const [payoutIban, setPayoutIban] = useState(data.publisher.payoutIban || '');
+  const [msg, setMsg] = useState('');
+  const [busy, setBusy] = useState(false);
+  return (
+    <div className="max-w-xl">
+      <PageHeader
+        title="Profil éditeur"
+        description={
+          <span className="inline-flex flex-wrap items-center gap-2">
+            <StatusPill status={data.publisher.status === 'active' ? 'published' : 'pending'} />
+            <span>
+              Payé le {data.publisher.paidAt ? new Date(data.publisher.paidAt).toLocaleDateString('fr-TN') : '—'}
+            </span>
+          </span>
+        }
+      />
+      <Section title="Identité publique" description="Affiché sur vos fiches produit de la marketplace">
+        <Field label="Nom public">
+          <Input value={displayName} onChange={(e) => setDisplayName(e.target.value)} />
+        </Field>
+        <Field label="Site web">
+          <Input value={website} onChange={(e) => setWebsite(e.target.value)} placeholder="https://" />
+        </Field>
+        <Field label="IBAN payout" hint="Utilisé pour les virements de commissions.">
+          <Input value={payoutIban} onChange={(e) => setPayoutIban(e.target.value)} className="font-mono" />
+        </Field>
+        <Button
+          variant="secondary"
+          loading={busy}
+          onClick={async () => {
+            setBusy(true);
+            setMsg('');
+            try {
+              await api('/api/marketplace/developer/profile', {
+                method: 'PATCH',
+                body: JSON.stringify({ displayName, website: website || null, payoutIban: payoutIban || null }),
+              });
+              setMsg('Profil mis à jour');
+              refresh();
+            } catch (e) {
+              setMsg(e instanceof ApiError ? e.message : 'Erreur');
+            } finally {
+              setBusy(false);
+            }
+          }}
+        >
+          Enregistrer
+        </Button>
+        {msg ? <Alert tone={msg.includes('mis à jour') ? 'success' : 'danger'}>{msg}</Alert> : null}
+      </Section>
+    </div>
+  );
+}
+
+export function DeveloperRoutes() {
+  const { user, loading } = useAuth();
+  const [data, setData] = useState<DashData | null>(null);
+  const [err, setErr] = useState('');
+
+  const refresh = useCallback(() => {
+    setErr('');
+    api<DashData>('/api/marketplace/developer/me')
+      .then(setData)
+      .catch((e) => setErr(e instanceof ApiError ? e.message : 'Erreur'));
+  }, []);
+
+  useEffect(() => {
+    if (user) refresh();
+  }, [user, refresh]);
+
+  if (loading) {
+    return (
+      <div className="mp-dev min-h-screen bg-slate-50 px-6 py-10 lg:pl-64">
+        <PageSkeleton />
+      </div>
+    );
+  }
+  if (!user) return <Navigate to="/login" replace />;
+  if (err && !data) {
+    return (
+      <div className="mp-dev mx-auto max-w-lg px-4 py-16">
+        <ErrorState message={err} onRetry={refresh} />
+      </div>
+    );
+  }
+  if (!data) {
+    return (
+      <div className="mp-dev min-h-screen bg-slate-50 px-6 py-10 lg:pl-64">
+        <PageSkeleton />
+      </div>
+    );
+  }
+  if (!data.publisher || data.publisher.status !== 'active') return <Navigate to="/developer" replace />;
+
+  return (
+    <DevShell data={data}>
+      <Routes>
+        <Route index element={<Overview data={data} />} />
+        <Route path="products" element={<ProductsList data={data} refresh={refresh} />} />
+        <Route path="products/:id" element={<ProductProfile refresh={refresh} />} />
+        <Route path="upload" element={<UploadWizard refresh={refresh} />} />
+        <Route path="sales" element={<SalesPage data={data} />} />
+        <Route path="settings" element={<PublisherSettings data={data} refresh={refresh} />} />
+        <Route path="*" element={<Navigate to="/developer/dashboard" replace />} />
+      </Routes>
+    </DevShell>
+  );
+}