create-snapify-app 0.0.0-stage → 1.1.1

package/template/apps/marketplace/src/App.tsx

@@ -0,0 +1,1229 @@
+/**
+ * Snapify Marketplace — UI inspirée d’addons.prestashop.com
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ */
+import React, { useEffect, useMemo, useState } from 'react';
+import { Link, Navigate, Route, Routes, useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom';
+import {
+  Award,
+  BadgeCheck,
+  LayoutTemplate,
+  Package,
+  Puzzle,
+  Search,
+  ShoppingCart,
+  Star,
+  Upload,
+  Users,
+  Shield,
+  User,
+  Menu,
+  SlidersHorizontal,
+  X,
+} from 'lucide-react';
+import { api, ApiError } from '../../shared/api';
+import { useAuth } from '../../shared/AuthContext';
+import { Brand, SnapifyMark } from '../../shared/Logo';
+import { DtInput, formatMoney } from '../../shared/ui';
+import { DeveloperRoutes } from './developer/DeveloperApp';
+
+type Product = {
+  id: string;
+  slug: string;
+  name: string;
+  kind: 'module' | 'theme';
+  shortDesc: string;
+  longDesc?: string;
+  category: string;
+  priceMillimes: number;
+  priceLabel: string;
+  icon: string;
+  screenshots: string[];
+  salesCount: number;
+  status?: string;
+  versions?: { id: string; version: string; changelog: string; createdAt: string }[];
+  reviews?: { id: string; rating: number; body: string; author: { displayName: string } | null }[];
+  avgRating?: number | null;
+  reviewCount?: number;
+  publisher?: { displayName: string; website?: string | null } | null;
+  engines?: { snapify?: string };
+};
+
+function Stars({ value, count }: { value?: number | null; count?: number }) {
+  if (value == null && !count) return <span className="mp-stars"><span>—</span></span>;
+  const v = value ?? 0;
+  return (
+    <span className="mp-stars" title={`${v}/5`}>
+      <Star className="h-3.5 w-3.5 fill-current" />
+      {v ? v.toFixed(1) : '—'}
+      {typeof count === 'number' ? <span>({count})</span> : null}
+    </span>
+  );
+}
+
+function mediaUrl(s?: string | null) {
+  return !!s && (/^https?:\/\//.test(s) || s.startsWith('/uploads/'));
+}
+
+function coverOf(p: Product) {
+  return (p.screenshots && p.screenshots.find(mediaUrl)) || (mediaUrl(p.icon) ? p.icon : null);
+}
+
+function ProductCard({ p }: { p: Product }) {
+  const cover = coverOf(p);
+  return (
+    <Link to={`/product/${p.slug}`} className="mp-card">
+      <div className="mp-card-media">
+        <span className="kind">{p.kind === 'theme' ? 'Thème' : 'Module'}</span>
+        {cover ? (
+          <img src={cover} alt="" />
+        ) : p.kind === 'theme' ? (
+          <LayoutTemplate className="h-12 w-12 text-px-primary-dark opacity-80" />
+        ) : (
+          <Puzzle className="h-12 w-12 text-px-primary-dark opacity-80" />
+        )}
+      </div>
+      <div className="mp-card-body">
+        <h3>{p.name}</h3>
+        <div className="mp-card-dev">par {p.publisher?.displayName || 'Snapify Community'}</div>
+        <p className="mp-card-desc">{p.shortDesc}</p>
+        <div className="mp-card-meta">
+          <span className={`mp-price ${p.priceMillimes === 0 ? 'free' : ''}`}>{p.priceMillimes === 0 ? 'Gratuit' : p.priceLabel}</span>
+          <Stars value={p.avgRating} count={p.reviewCount} />
+        </div>
+      </div>
+    </Link>
+  );
+}
+
+const NAV_LINKS = [
+  { to: '/catalog?kind=module', label: 'Modules', match: (path: string, kind: string | null) => path === '/catalog' && kind === 'module' },
+  { to: '/catalog?kind=theme', label: 'Thèmes', match: (path: string, kind: string | null) => path === '/catalog' && kind === 'theme' },
+  { to: '/catalog', label: 'Catalogue', match: (path: string, kind: string | null) => path === '/catalog' && !kind },
+  { to: '/developer', label: 'Développeurs', match: (path: string) => path === '/developer' },
+];
+
+function Shell({ children }: { children: React.ReactNode }) {
+  const { user, logout } = useAuth();
+  const nav = useNavigate();
+  const location = useLocation();
+  const [cartCount, setCartCount] = useState(0);
+  const [q, setQ] = useState('');
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [fees, setFees] = useState<{ developerFeeLabel: string; commissionBps: number } | null>(null);
+  const kind = new URLSearchParams(location.search).get('kind');
+
+  useEffect(() => {
+    api<{ developerFeeLabel: string; commissionBps: number }>('/api/marketplace/settings/public')
+      .then(setFees)
+      .catch(() => {});
+  }, []);
+
+  useEffect(() => {
+    if (!user) return setCartCount(0);
+    api<{ items: unknown[] }>('/api/marketplace/cart')
+      .then((d) => setCartCount(d.items.length))
+      .catch(() => setCartCount(0));
+  }, [user, children]);
+
+  useEffect(() => setMenuOpen(false), [location.pathname, location.search]);
+
+  useEffect(() => {
+    document.body.style.overflow = menuOpen ? 'hidden' : '';
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [menuOpen]);
+
+  const goSearch = (e?: React.FormEvent) => {
+    e?.preventDefault();
+    nav(`/catalog?q=${encodeURIComponent(q.trim())}`);
+    setMenuOpen(false);
+  };
+
+  const isPublisher = user && (user.role === 'publisher' || user.role === 'admin');
+
+  return (
+    <div className="min-h-screen bg-white">
+      <div className="mp-topbar">
+        <div className="mp-wrap flex h-9 items-center justify-between gap-3">
+          <span>Marketplace officielle Snapify — thèmes & modules signés</span>
+          <div className="flex gap-4">
+            <Link to="/developer">Devenir développeur</Link>
+            <a href="https://developers.snapify.tn">Documentation</a>
+            <a href="https://community.snapify.tn" target="_blank" rel="noreferrer">
+              Community
+            </a>
+            <a href="https://snapify.tn" target="_blank" rel="noreferrer">
+              snapify.tn →
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <header className="mp-header">
+        <div className="mp-header-inner">
+          <button
+            type="button"
+            className="mp-icon-btn mp-burger"
+            onClick={() => setMenuOpen((v) => !v)}
+            aria-label={menuOpen ? 'Fermer le menu' : 'Ouvrir le menu'}
+            aria-expanded={menuOpen}
+          >
+            {menuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+          </button>
+          <Link to="/" className="mp-logo">
+            <div className="mp-logo-mark">
+              <SnapifyMark className="h-5 w-5" accent="#fff" frame="#fff" />
+            </div>
+            <div className="mp-logo-text">
+              <div className="text-sm font-bold tracking-wide">SNAPIFY</div>
+              <div className="text-[11px] text-white/50">Addons Marketplace</div>
+            </div>
+          </Link>
+
+          <nav className="mp-nav">
+            {NAV_LINKS.map((l) => (
+              <Link key={l.to} to={l.to} className={l.match(location.pathname, kind) ? 'active' : ''}>
+                {l.label}
+              </Link>
+            ))}
+          </nav>
+
+          <form className="mp-search-header" onSubmit={goSearch}>
+            <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Rechercher un module, un thème…" />
+            <button type="submit" aria-label="Rechercher">
+              <Search className="h-4 w-4" />
+            </button>
+          </form>
+
+          <div className="mp-header-actions">
+            {user ? (
+              <>
+                <Link to="/account" className="mp-icon-btn" aria-label="Mon compte">
+                  <User className="h-5 w-5" />
+                  <span className="mp-hide-lg">{user.displayName}</span>
+                </Link>
+                {isPublisher && (
+                  <Link to="/developer/dashboard" className="mp-icon-btn mp-hide-sm">
+                    Dashboard
+                  </Link>
+                )}
+                {user.role === 'admin' && (
+                  <Link to="/admin" className="mp-icon-btn mp-hide-sm">
+                    Admin
+                  </Link>
+                )}
+                <button type="button" className="mp-icon-btn mp-hide-sm" onClick={() => void logout()}>
+                  Sortir
+                </button>
+              </>
+            ) : (
+              <Link to="/login" className="mp-icon-btn" aria-label="Compte">
+                <User className="h-5 w-5" />
+                <span className="mp-hide-sm">Compte</span>
+              </Link>
+            )}
+            <Link to="/cart" className="mp-icon-btn" aria-label={`Panier (${cartCount})`}>
+              <ShoppingCart className="h-5 w-5" />
+              <span className="mp-hide-sm">({cartCount})</span>
+              {cartCount > 0 && <span className="mp-badge">{cartCount}</span>}
+            </Link>
+          </div>
+        </div>
+
+        {menuOpen && (
+          <div className="mp-drawer">
+            <form className="mp-drawer-search" onSubmit={goSearch}>
+              <Search className="h-4 w-4" />
+              <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Rechercher un module, un thème…" />
+            </form>
+            <nav>
+              {NAV_LINKS.map((l) => (
+                <Link key={l.to} to={l.to} className={l.match(location.pathname, kind) ? 'active' : ''}>
+                  {l.label}
+                </Link>
+              ))}
+            </nav>
+            <div className="mp-drawer-sep" />
+            <nav>
+              {user ? (
+                <>
+                  <Link to="/account">Mes achats & licences</Link>
+                  {isPublisher && <Link to="/developer/dashboard">Dashboard vendeur</Link>}
+                  {user.role === 'admin' && <Link to="/admin">Admin marketplace</Link>}
+                  <button type="button" onClick={() => void logout()}>
+                    Se déconnecter
+                  </button>
+                </>
+              ) : (
+                <>
+                  <Link to="/login">Se connecter</Link>
+                  <Link to="/register">Créer un compte</Link>
+                </>
+              )}
+            </nav>
+            <div className="mp-drawer-sep" />
+            <nav className="mp-drawer-ext">
+              <a href="https://developers.snapify.tn">Documentation développeurs</a>
+              <a href="https://community.snapify.tn" target="_blank" rel="noreferrer">
+                Community
+              </a>
+              <a href="https://snapify.tn" target="_blank" rel="noreferrer">
+                snapify.tn
+              </a>
+            </nav>
+          </div>
+        )}
+      </header>
+      {menuOpen && <div className="mp-drawer-backdrop" onClick={() => setMenuOpen(false)} />}
+
+      <main>{children}</main>
+
+      <footer className="mp-footer">
+        <div className="mp-wrap">
+          <div className="mp-footer-grid">
+            <div>
+              <Brand subtitle="Addons Marketplace" dark />
+              <p className="mt-4 max-w-xs text-sm leading-relaxed text-white/55">
+                La marketplace officielle pour étendre Snapify : modules, thèmes, et outils créés par la communauté et NOVALABS.
+              </p>
+            </div>
+            <div>
+              <h4>Catalogue</h4>
+              <Link to="/catalog?kind=module">Modules</Link>
+              <Link to="/catalog?kind=theme">Thèmes</Link>
+              <Link to="/catalog?pricing=free">Gratuits</Link>
+              <Link to="/catalog?sort=popular">Best-sellers</Link>
+            </div>
+            <div>
+              <h4>Développeurs</h4>
+              <a href="https://developers.snapify.tn">Documentation</a>
+              <Link to="/developer">Publier un module</Link>
+              <Link to="/developer">{fees ? `Inscription ${fees.developerFeeLabel}` : 'Inscription développeur'}</Link>
+              <Link to="/developer/dashboard">Espace vendeur</Link>
+            </div>
+            <div>
+              <h4>Aide</h4>
+              <a href="https://community.snapify.tn">Forum Community</a>
+              <a href="https://snapify.tn">Snapify Tunisie</a>
+              <a href="https://snapify.fr">Snapify France</a>
+              <a href="https://novalabs.tn" rel="noopener noreferrer">
+                NOVALABS
+              </a>
+              <Link to="/account">Mes achats & licences</Link>
+            </div>
+          </div>
+          <div className="mp-footer-bottom">
+            <span>© 2026 NOVALABS WEB DESIGN — Tunisie</span>
+            <span>Paiements Flouci{fees ? ` · Commission marketplace ${fees.commissionBps / 100} %` : ''}</span>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}
+
+function Home() {
+  const nav = useNavigate();
+  const [q, setQ] = useState('');
+  const [popular, setPopular] = useState<Product[]>([]);
+  const [newest, setNewest] = useState<Product[]>([]);
+  const [modules, setModules] = useState<Product[]>([]);
+  const [themes, setThemes] = useState<Product[]>([]);
+  const [cats, setCats] = useState<{ category: string; n: number }[]>([]);
+  const [devFeeLabel, setDevFeeLabel] = useState(() => formatMoney(100000));
+
+  useEffect(() => {
+    api<{ items: Product[] }>('/api/marketplace/products?sort=popular&pageSize=8').then((d) => setPopular(d.items));
+    api<{ items: Product[] }>('/api/marketplace/products?sort=newest&pageSize=8').then((d) => setNewest(d.items));
+    api<{ items: Product[] }>('/api/marketplace/products?kind=module&sort=popular&pageSize=4').then((d) => setModules(d.items));
+    api<{ items: Product[] }>('/api/marketplace/products?kind=theme&sort=popular&pageSize=4').then((d) => setThemes(d.items));
+    api<{ items: { category: string; n: number }[] }>('/api/marketplace/categories').then((d) => setCats(d.items));
+    api<{ developerFeeLabel: string }>('/api/marketplace/settings/public')
+      .then((d) => setDevFeeLabel(d.developerFeeLabel))
+      .catch(() => {});
+  }, []);
+
+  return (
+    <div>
+      <section className="mp-hero">
+        <h1>Boostez les performances de votre site avec notre Marketplace</h1>
+        <p>Tout ce dont vous avez besoin pour personnaliser Snapify — modules, thèmes et outils.</p>
+        <form
+          className="mp-hero-search"
+          onSubmit={(e) => {
+            e.preventDefault();
+            nav(`/catalog?q=${encodeURIComponent(q.trim())}`);
+          }}
+        >
+          <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Que recherchez-vous ? (Ex. paiement, SEO, thème…)" />
+          <button type="submit" aria-label="Rechercher">
+            <Search className="h-4 w-4" /> <span className="mp-hide-sm">Rechercher</span>
+          </button>
+        </form>
+      </section>
+
+      <div className="mp-wrap">
+        <div className="mp-promos">
+          <Link to="/catalog?kind=module" className="mp-promo mp-promo-a">
+            <div>
+              <h3>Modules pour accélérer votre boutique</h3>
+              <p>SEO, panier, checkout, chat IA… étendez Snapify en un clic.</p>
+            </div>
+            <span className="btn-mp self-start mt-4">Voir les modules</span>
+          </Link>
+          <Link to="/catalog?kind=theme" className="mp-promo mp-promo-b">
+            <div>
+              <h3>Thèmes premium prêts à publier</h3>
+              <p>Apparence moderne, blocs CMS et e-commerce intégrés.</p>
+            </div>
+            <span className="btn-mp self-start mt-4" style={{ background: '#0b1528' }}>
+              Voir les thèmes
+            </span>
+          </Link>
+        </div>
+
+        <div className="mp-trust">
+          <div className="mp-trust-item">
+            <div className="mp-trust-icon">
+              <Award className="h-5 w-5" />
+            </div>
+            <div>
+              <strong>Sélection de modules & thèmes</strong>
+              <span>Catalogue validé par l’équipe Snapify</span>
+            </div>
+          </div>
+          <div className="mp-trust-item">
+            <div className="mp-trust-icon">
+              <BadgeCheck className="h-5 w-5" />
+            </div>
+            <div>
+              <strong>Assurance qualité</strong>
+              <span>Paquets signés, versions & changelog</span>
+            </div>
+          </div>
+          <div className="mp-trust-item">
+            <div className="mp-trust-icon">
+              <Users className="h-5 w-5" />
+            </div>
+            <div>
+              <strong>Communauté de développeurs</strong>
+              <span>Publiez vos créations dès {devFeeLabel}</span>
+            </div>
+          </div>
+        </div>
+
+        {cats.length > 0 && (
+          <section className="mp-section">
+            <div className="mp-section-head">
+              <h2>Parcourir par catégorie</h2>
+              <Link className="mp-link-more" to="/catalog">
+                Voir tout →
+              </Link>
+            </div>
+            <div className="mp-cats">
+              {cats.map((c) => (
+                <Link key={c.category} className="mp-cat" to={`/catalog?category=${encodeURIComponent(c.category)}`}>
+                  {c.category} <span style={{ color: '#9aa3af', fontWeight: 500 }}>({c.n})</span>
+                </Link>
+              ))}
+            </div>
+          </section>
+        )}
+
+        <section className="mp-section">
+          <div className="mp-section-head">
+            <h2>Best-sellers</h2>
+            <Link className="mp-link-more" to="/catalog?sort=popular">
+              Voir plus →
+            </Link>
+          </div>
+          <div className="mp-grid">{popular.map((p) => <ProductCard key={p.id} p={p} />)}</div>
+        </section>
+
+        <section className="mp-section" style={{ paddingTop: 0 }}>
+          <div className="mp-section-head">
+            <h2>Nouveautés</h2>
+            <Link className="mp-link-more" to="/catalog?sort=newest">
+              Voir plus →
+            </Link>
+          </div>
+          <div className="mp-grid">{newest.map((p) => <ProductCard key={p.id} p={p} />)}</div>
+        </section>
+
+        <section className="mp-section" style={{ paddingTop: 0 }}>
+          <div className="mp-section-head">
+            <h2>Modules populaires</h2>
+            <Link className="mp-link-more" to="/catalog?kind=module">
+              Tous les modules →
+            </Link>
+          </div>
+          <div className="mp-grid">{modules.map((p) => <ProductCard key={p.id} p={p} />)}</div>
+        </section>
+
+        <section className="mp-section" style={{ paddingTop: 0 }}>
+          <div className="mp-section-head">
+            <h2>Thèmes populaires</h2>
+            <Link className="mp-link-more" to="/catalog?kind=theme">
+              Tous les thèmes →
+            </Link>
+          </div>
+          <div className="mp-grid">{themes.map((p) => <ProductCard key={p.id} p={p} />)}</div>
+        </section>
+      </div>
+    </div>
+  );
+}
+
+function Catalog() {
+  const [params, setParams] = useSearchParams();
+  const [data, setData] = useState<{ items: Product[]; total: number }>({ items: [], total: 0 });
+  const [cats, setCats] = useState<{ category: string; n: number }[]>([]);
+  const q = params.get('q') || '';
+  const kind = params.get('kind') || '';
+  const sort = params.get('sort') || 'popular';
+  const pricing = params.get('pricing') || '';
+  const category = params.get('category') || '';
+  const [filtersOpen, setFiltersOpen] = useState(false);
+  const activeFilters = [kind, pricing, category, q].filter(Boolean).length;
+
+  const set = (key: string, value: string) => {
+    const next = new URLSearchParams(params);
+    if (value) next.set(key, value);
+    else next.delete(key);
+    setParams(next);
+  };
+
+  useEffect(() => {
+    const qs = new URLSearchParams({ sort, pageSize: '24' });
+    if (q) qs.set('q', q);
+    if (kind) qs.set('kind', kind);
+    if (pricing) qs.set('pricing', pricing);
+    if (category) qs.set('category', category);
+    api<{ items: Product[]; total: number }>(`/api/marketplace/products?${qs}`).then(setData);
+  }, [q, kind, sort, pricing, category]);
+
+  useEffect(() => {
+    api<{ items: { category: string; n: number }[] }>('/api/marketplace/categories').then((d) => setCats(d.items));
+  }, []);
+
+  const title = useMemo(() => {
+    if (kind === 'module') return 'Modules';
+    if (kind === 'theme') return 'Thèmes';
+    if (pricing === 'free') return 'Extensions gratuites';
+    if (category) return category;
+    return 'Catalogue';
+  }, [kind, pricing, category]);
+
+  return (
+    <div className="mp-wrap">
+      <div className="mp-breadcrumb">
+        <Link to="/">Accueil</Link> / <span>{title}</span>
+      </div>
+      <div className="mp-catalog">
+        <button type="button" className="mp-filter-toggle" onClick={() => setFiltersOpen((v) => !v)} aria-expanded={filtersOpen}>
+          <SlidersHorizontal className="h-4 w-4" />
+          Filtres et tri
+          {activeFilters > 0 && <span className="mp-filter-count">{activeFilters}</span>}
+        </button>
+        <aside className={`mp-filters${filtersOpen ? ' is-open' : ''}`}>
+          <div className="group">
+            <h3>Recherche</h3>
+            <input
+              className="mp-input"
+              type="search"
+              defaultValue={q}
+              placeholder="Mot-clé…"
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') set('q', (e.target as HTMLInputElement).value);
+              }}
+            />
+          </div>
+          <div className="group">
+            <h3>Type</h3>
+            {[
+              ['', 'Tous'],
+              ['module', 'Modules'],
+              ['theme', 'Thèmes'],
+            ].map(([v, l]) => (
+              <label key={v || 'all'}>
+                <input type="radio" name="kind" checked={kind === v} onChange={() => set('kind', v)} /> {l}
+              </label>
+            ))}
+          </div>
+          <div className="group">
+            <h3>Tarif</h3>
+            {[
+              ['', 'Tous'],
+              ['free', 'Gratuit'],
+              ['paid', 'Payant'],
+            ].map(([v, l]) => (
+              <label key={v || 'allp'}>
+                <input type="radio" name="pricing" checked={pricing === v} onChange={() => set('pricing', v)} /> {l}
+              </label>
+            ))}
+          </div>
+          <div className="group">
+            <h3>Catégorie</h3>
+            <label>
+              <input type="radio" name="cat" checked={!category} onChange={() => set('category', '')} /> Toutes
+            </label>
+            {cats.map((c) => (
+              <label key={c.category}>
+                <input type="radio" name="cat" checked={category === c.category} onChange={() => set('category', c.category)} />
+                {c.category} ({c.n})
+              </label>
+            ))}
+          </div>
+          <div className="group">
+            <h3>Trier par</h3>
+            <select value={sort} onChange={(e) => set('sort', e.target.value)}>
+              <option value="popular">Popularité</option>
+              <option value="newest">Nouveautés</option>
+              <option value="price_asc">Prix croissant</option>
+              <option value="price_desc">Prix décroissant</option>
+            </select>
+          </div>
+        </aside>
+
+        <div>
+          <div className="mp-toolbar">
+            <h1 style={{ margin: 0, fontSize: '1.5rem' }}>{title}</h1>
+            <span className="count">{data.total} résultat{data.total > 1 ? 's' : ''}</span>
+          </div>
+          {data.items.length ? (
+            <div className="mp-grid">{data.items.map((p) => <ProductCard key={p.id} p={p} />)}</div>
+          ) : (
+            <div className="mp-empty">Aucun produit ne correspond à vos filtres.</div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ProductPage() {
+  const { slug } = useParams();
+  const { user } = useAuth();
+  const nav = useNavigate();
+  const [product, setProduct] = useState<Product | null>(null);
+  const [tab, setTab] = useState<'desc' | 'versions' | 'reviews'>('desc');
+  const [msg, setMsg] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [rating, setRating] = useState(5);
+  const [reviewBody, setReviewBody] = useState('');
+  const [galleryIdx, setGalleryIdx] = useState(0);
+
+  useEffect(() => {
+    api<{ product: Product }>(`/api/marketplace/products/${slug}`).then((d) => {
+      setProduct(d.product);
+      setGalleryIdx(0);
+    });
+  }, [slug]);
+
+  if (!product) return <div className="mp-wrap py-16 text-center text-slate-500">Chargement du produit…</div>;
+
+  const gallery = [
+    ...new Set([...(mediaUrl(product.icon) ? [product.icon] : []), ...(product.screenshots || []).filter(mediaUrl)]),
+  ];
+  const mainImage = gallery[galleryIdx] || gallery[0];
+  const shortDesc = (product.shortDesc || '').trim();
+  const showShortDesc = !!shortDesc && !(product.longDesc || '').replace(/<[^>]+>/g, ' ').includes(shortDesc);
+
+  return (
+    <div className="mp-wrap">
+      <div className="mp-breadcrumb">
+        <Link to="/">Accueil</Link> / <Link to={`/catalog?kind=${product.kind}`}>{product.kind === 'theme' ? 'Thèmes' : 'Modules'}</Link> /{' '}
+        <span>{product.name}</span>
+      </div>
+
+      <div className="mp-product">
+        <div className="mp-product-media">
+          <div className="mp-gallery">
+            {mainImage ? (
+              <img className="mp-gallery-main" src={mainImage} alt={product.name} />
+            ) : product.kind === 'theme' ? (
+              <LayoutTemplate className="h-24 w-24 text-px-primary-dark opacity-70" />
+            ) : (
+              <Puzzle className="h-24 w-24 text-px-primary-dark opacity-70" />
+            )}
+          </div>
+          {gallery.length > 1 && (
+            <div className="mp-gallery-thumbs">
+              {gallery.map((url, i) => (
+                <button key={`${url}-${i}`} type="button" className={i === galleryIdx ? 'active' : ''} onClick={() => setGalleryIdx(i)}>
+                  <img src={url} alt="" />
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+        <div className="mp-product-info">
+          <div className="mp-tabs">
+            <button type="button" className={tab === 'desc' ? 'active' : ''} onClick={() => setTab('desc')}>
+              Description
+            </button>
+            <button type="button" className={tab === 'versions' ? 'active' : ''} onClick={() => setTab('versions')}>
+              Versions & changelog
+            </button>
+            <button type="button" className={tab === 'reviews' ? 'active' : ''} onClick={() => setTab('reviews')}>
+              Avis ({product.reviews?.length || 0})
+            </button>
+          </div>
+          <div className="mp-tab-panel">
+            {tab === 'desc' && (
+              <div>
+                {showShortDesc && <p style={{ color: '#6c6c6c', marginTop: 0 }}>{shortDesc}</p>}
+                <div dangerouslySetInnerHTML={{ __html: product.longDesc || '<p>Aucune description détaillée.</p>' }} />
+                <p style={{ marginTop: 20, fontSize: 13, color: '#6c6c6c' }}>
+                  Catégorie : <strong>{product.category}</strong> · Compatible Snapify {product.engines?.snapify || '^1.0.0'}
+                </p>
+              </div>
+            )}
+            {tab === 'versions' && (
+              <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
+                {(product.versions || []).map((v) => (
+                  <li key={v.id} style={{ borderBottom: '1px solid #e5e7eb', padding: '14px 0' }}>
+                    <strong>v{v.version}</strong>
+                    <div style={{ color: '#6c6c6c', fontSize: 13, marginTop: 4 }}>{new Date(v.createdAt).toLocaleDateString('fr-TN')}</div>
+                    <div style={{ marginTop: 8 }}>{v.changelog || '—'}</div>
+                  </li>
+                ))}
+                {!product.versions?.length && <li>Aucune version publiée.</li>}
+              </ul>
+            )}
+            {tab === 'reviews' && (
+              <div>
+                <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
+                  {(product.reviews || []).map((r) => (
+                    <li key={r.id} style={{ borderBottom: '1px solid #e5e7eb', padding: '14px 0' }}>
+                      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+                        <strong>{r.author?.displayName || 'Anonyme'}</strong>
+                        <Stars value={r.rating} />
+                      </div>
+                      <p style={{ margin: '8px 0 0', color: '#444' }}>{r.body}</p>
+                    </li>
+                  ))}
+                  {!product.reviews?.length && <li style={{ color: '#6c6c6c' }}>Pas encore d’avis — soyez le premier.</li>}
+                </ul>
+                {user && (
+                  <div style={{ marginTop: 24, borderTop: '1px solid #e5e7eb', paddingTop: 16 }}>
+                    <h3 style={{ marginTop: 0 }}>Donner un avis</h3>
+                    <label className="mp-label">
+                      Note
+                      <select className="mp-input" value={rating} onChange={(e) => setRating(Number(e.target.value))}>
+                        {[5, 4, 3, 2, 1].map((n) => (
+                          <option key={n} value={n}>
+                            {n} / 5
+                          </option>
+                        ))}
+                      </select>
+                    </label>
+                    <label className="mp-label">
+                      Commentaire
+                      <textarea className="mp-input" rows={3} value={reviewBody} onChange={(e) => setReviewBody(e.target.value)} />
+                    </label>
+                    <button
+                      type="button"
+                      className="btn-mp"
+                      style={{ marginTop: 12 }}
+                      onClick={async () => {
+                        try {
+                          await api(`/api/marketplace/products/${product.id}/reviews`, {
+                            method: 'POST',
+                            body: JSON.stringify({ rating, body: reviewBody }),
+                          });
+                          const d = await api<{ product: Product }>(`/api/marketplace/products/${slug}`);
+                          setProduct(d.product);
+                          setReviewBody('');
+                          setMsg('Avis publié');
+                        } catch (e) {
+                          setMsg(e instanceof ApiError ? e.message : 'Erreur');
+                        }
+                      }}
+                    >
+                      Publier l’avis
+                    </button>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+
+        <aside className="mp-buybox">
+          <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
+            {mediaUrl(product.icon) ? (
+              <img src={product.icon} alt="" style={{ width: 56, height: 56, borderRadius: 12, objectFit: 'cover', border: '1px solid #e5e7eb', flexShrink: 0 }} />
+            ) : null}
+            <div style={{ minWidth: 0 }}>
+              <div style={{ fontSize: 12, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.06em', color: '#6c6c6c' }}>
+                {product.kind === 'theme' ? 'Thème' : 'Module'} · {product.category}
+              </div>
+              <h1 style={{ margin: '8px 0 0', fontSize: '1.45rem', lineHeight: 1.3 }}>{product.name}</h1>
+            </div>
+          </div>
+          <div style={{ marginTop: 8, display: 'flex', gap: 10, alignItems: 'center' }}>
+            <Stars value={product.avgRating} count={product.reviews?.length} />
+            <span style={{ fontSize: 12, color: '#6c6c6c' }}>{product.salesCount} ventes</span>
+          </div>
+          <div className={`price-lg ${product.priceMillimes === 0 ? 'free' : ''}`} style={product.priceMillimes === 0 ? { color: '#00a89d' } : undefined}>
+            {product.priceMillimes === 0 ? 'Gratuit' : product.priceLabel}
+          </div>
+          <div className="tax">TTC · Paiement sécurisé Flouci</div>
+          <button
+            type="button"
+            className="mp-btn-buy"
+            disabled={busy}
+            onClick={async () => {
+              if (!user) return nav('/login');
+              setBusy(true);
+              setMsg('');
+              try {
+                await api('/api/marketplace/cart/add', { method: 'POST', body: JSON.stringify({ productId: product.id }) });
+                setMsg('Ajouté au panier');
+              } catch (e) {
+                setMsg(e instanceof ApiError ? e.message : 'Erreur');
+              } finally {
+                setBusy(false);
+              }
+            }}
+          >
+            Ajouter au panier
+          </button>
+          <button type="button" className="mp-btn-ghost" onClick={() => nav('/cart')}>
+            Voir mon panier
+          </button>
+          {msg && <p style={{ marginTop: 12, fontSize: 13, color: '#00a89d' }}>{msg}</p>}
+          <div style={{ marginTop: 20, paddingTop: 16, borderTop: '1px solid #e5e7eb', fontSize: 13, color: '#6c6c6c' }}>
+            <div>
+              Développé par <strong style={{ color: '#1d1d1b' }}>{product.publisher?.displayName || 'Community'}</strong>
+            </div>
+            {product.versions?.[0] && (
+              <div style={{ marginTop: 6 }}>
+                Version actuelle : <strong style={{ color: '#1d1d1b' }}>v{product.versions[0].version}</strong>
+              </div>
+            )}
+            <div style={{ marginTop: 6, display: 'flex', gap: 6, alignItems: 'center' }}>
+              <Shield className="h-3.5 w-3.5" /> Paquet contrôlé Snapify
+            </div>
+          </div>
+        </aside>
+      </div>
+    </div>
+  );
+}
+
+function CartPage() {
+  const { user } = useAuth();
+  const nav = useNavigate();
+  const [items, setItems] = useState<Product[]>([]);
+  const [total, setTotal] = useState(0);
+  const [busy, setBusy] = useState(false);
+  const [err, setErr] = useState('');
+
+  useEffect(() => {
+    if (!user) return;
+    api<{ items: Product[]; totalMillimes: number }>('/api/marketplace/cart').then((d) => {
+      setItems(d.items);
+      setTotal(d.totalMillimes);
+    });
+  }, [user]);
+
+  if (!user) return <Navigate to="/login" replace />;
+
+  return (
+    <div className="mp-wrap" style={{ maxWidth: 860, paddingBottom: 48 }}>
+      <div className="mp-breadcrumb">
+        <Link to="/">Accueil</Link> / Panier
+      </div>
+      <h1 style={{ fontSize: '1.75rem', margin: '12px 0 20px' }}>Votre panier</h1>
+      {items.length === 0 ? (
+        <div className="mp-empty">
+          Votre panier est vide.
+          <div style={{ marginTop: 16 }}>
+            <Link to="/catalog" className="btn-mp">
+              Continuer vos achats
+            </Link>
+          </div>
+        </div>
+      ) : (
+        <>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+            {items.map((p) => (
+              <div key={p.id} style={{ display: 'flex', gap: 14, border: '1px solid #e5e7eb', borderRadius: 8, padding: 12, alignItems: 'center' }}>
+                <div style={{ width: 72, height: 50, flexShrink: 0, background: '#eef6f5', borderRadius: 6, display: 'grid', placeItems: 'center', overflow: 'hidden' }}>
+                  {coverOf(p) ? <img src={coverOf(p)!} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : <Package className="h-6 w-6 text-px-primary-dark" />}
+                </div>
+                <div style={{ flex: 1, minWidth: 0 }}>
+                  <Link to={`/product/${p.slug}`} style={{ fontWeight: 700 }}>
+                    {p.name}
+                  </Link>
+                  <div style={{ fontSize: 13, color: '#6c6c6c' }}>{p.kind === 'theme' ? 'Thème' : 'Module'}</div>
+                </div>
+                <strong>{p.priceMillimes === 0 ? 'Gratuit' : p.priceLabel}</strong>
+              </div>
+            ))}
+          </div>
+          <div style={{ marginTop: 24, border: '1px solid #e5e7eb', borderRadius: 8, padding: 20, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
+            <div>
+              <div style={{ fontSize: 13, color: '#6c6c6c' }}>Total TTC</div>
+              <div style={{ fontSize: '1.5rem', fontWeight: 800 }}>{formatMoney(total)}</div>
+            </div>
+            <button
+              type="button"
+              className="mp-btn-buy"
+              style={{ width: 'auto', minWidth: 200, padding: '0 24px' }}
+              disabled={busy}
+              onClick={async () => {
+                setBusy(true);
+                setErr('');
+                try {
+                  const res = await api<{ orderId: string; status: string; link: string | null }>('/api/marketplace/checkout', {
+                    method: 'POST',
+                    body: '{}',
+                  });
+                  if (res.link && res.status !== 'paid') window.location.href = res.link;
+                  else nav(`/checkout/success?order=${res.orderId}`);
+                } catch (e) {
+                  setErr(e instanceof ApiError ? e.message : 'Erreur');
+                } finally {
+                  setBusy(false);
+                }
+              }}
+            >
+              Payer avec Flouci
+            </button>
+          </div>
+          {err && <p style={{ color: '#dc2626', fontSize: 14 }}>{err}</p>}
+        </>
+      )}
+    </div>
+  );
+}
+
+function AuthPage({ mode }: { mode: 'login' | 'register' }) {
+  const { login, register, user } = useAuth();
+  const nav = useNavigate();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [displayName, setDisplayName] = useState('');
+  const [err, setErr] = useState('');
+  if (user) return <Navigate to="/" replace />;
+
+  return (
+    <div className="mp-panel">
+      <h1 style={{ marginTop: 0, fontSize: '1.4rem' }}>{mode === 'login' ? 'Connexion' : 'Créer un compte'}</h1>
+      <p style={{ color: '#6c6c6c', fontSize: 14, marginTop: 4 }}>Compte partagé Community + Marketplace</p>
+      <form
+        onSubmit={async (e) => {
+          e.preventDefault();
+          setErr('');
+          try {
+            if (mode === 'login') await login(email, password);
+            else await register(email, password, displayName);
+            nav('/');
+          } catch (ex) {
+            setErr(ex instanceof ApiError ? ex.message : 'Erreur');
+          }
+        }}
+      >
+        {mode === 'register' && (
+          <label className="mp-label">
+            Nom affiché
+            <input className="mp-input" value={displayName} onChange={(e) => setDisplayName(e.target.value)} required />
+          </label>
+        )}
+        <label className="mp-label">
+          E-mail
+          <input className="mp-input" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
+        </label>
+        <label className="mp-label">
+          Mot de passe
+          <input className="mp-input" type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
+        </label>
+        {err && <p style={{ color: '#dc2626', fontSize: 13 }}>{err}</p>}
+        <button type="submit" className="mp-btn-buy" style={{ marginTop: 18 }}>
+          {mode === 'login' ? 'Se connecter' : 'S’inscrire'}
+        </button>
+      </form>
+      <p style={{ textAlign: 'center', marginTop: 16, fontSize: 14 }}>
+        {mode === 'login' ? <Link to="/register">Créer un compte</Link> : <Link to="/login">Déjà inscrit ?</Link>}
+      </p>
+    </div>
+  );
+}
+
+function AccountPage() {
+  const { user } = useAuth();
+  const [orders, setOrders] = useState<
+    { id: string; status: string; totalLabel: string; items: { licenseKey: string; downloadToken: string | null; product: Product | null }[] }[]
+  >([]);
+  useEffect(() => {
+    if (user) api<{ items: typeof orders }>('/api/marketplace/orders/mine').then((d) => setOrders(d.items));
+  }, [user]);
+  if (!user) return <Navigate to="/login" replace />;
+
+  return (
+    <div className="mp-wrap" style={{ maxWidth: 900, paddingBottom: 48 }}>
+      <div className="mp-breadcrumb">
+        <Link to="/">Accueil</Link> / Mes achats
+      </div>
+      <h1 style={{ fontSize: '1.75rem' }}>Mes achats & licences</h1>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 16 }}>
+        {orders.map((o) => (
+          <div key={o.id} style={{ border: '1px solid #e5e7eb', borderRadius: 8, padding: 16 }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, color: '#6c6c6c' }}>
+              <span>Commande {o.id.slice(0, 8)}…</span>
+              <span>
+                {o.status} · {o.totalLabel}
+              </span>
+            </div>
+            {o.items.map((it, i) => (
+              <div key={i} style={{ display: 'flex', justifyContent: 'space-between', gap: 12, marginTop: 12, paddingTop: 12, borderTop: '1px solid #f1f5f9', flexWrap: 'wrap' }}>
+                <strong>{it.product?.name}</strong>
+                <span style={{ fontSize: 13, color: '#6c6c6c' }}>Licence {it.licenseKey}</span>
+                {it.downloadToken && (
+                  <a href={`/api/marketplace/downloads/${it.downloadToken}`} style={{ color: '#0066ee', fontWeight: 600, fontSize: 13 }}>
+                    Télécharger
+                  </a>
+                )}
+              </div>
+            ))}
+          </div>
+        ))}
+        {!orders.length && <div className="mp-empty">Aucun achat pour le moment.</div>}
+      </div>
+    </div>
+  );
+}
+
+function DeveloperLanding() {
+  const { user } = useAuth();
+  const [fee, setFee] = useState(() => formatMoney(100000));
+  const [busy, setBusy] = useState(false);
+  const [err, setErr] = useState('');
+  const [name, setName] = useState(user?.displayName || '');
+
+  useEffect(() => {
+    api<{ developerFeeLabel: string }>('/api/marketplace/settings/public')
+      .then((d) => setFee(d.developerFeeLabel))
+      .catch(() => setFee(formatMoney(100000)));
+  }, []);
+
+  return (
+    <div>
+      <section className="mp-hero" style={{ paddingBottom: 64 }}>
+        <h1>Devenez développeur Snapify</h1>
+        <p>Publiez vos modules et thèmes sur la marketplace. Inscription unique : {fee}.</p>
+        <a href="https://developers.snapify.tn" className="mp-dev-docs-link">
+          Lire la documentation développeur →
+        </a>
+      </section>
+      <div className="mp-wrap" style={{ maxWidth: 720, marginTop: -32, position: 'relative', zIndex: 2, paddingBottom: 48 }}>
+        <div style={{ background: '#fff', border: '1px solid #e5e7eb', borderRadius: 8, padding: 28, boxShadow: '0 12px 40px rgba(0,0,0,.08)' }}>
+          <div className="mp-trust" style={{ border: 'none', padding: '0 0 24px', gridTemplateColumns: '1fr' }}>
+            <div className="mp-trust-item">
+              <div className="mp-trust-icon">
+                <Upload className="h-5 w-5" />
+              </div>
+              <div>
+                <strong>Publiez sans limite</strong>
+                <span>Uploadez des paquets .snapmod / .snaptheme, versions et changelogs.</span>
+              </div>
+            </div>
+            <div className="mp-trust-item">
+              <div className="mp-trust-icon">
+                <BadgeCheck className="h-5 w-5" />
+              </div>
+              <div>
+                <strong>Revenus nets</strong>
+                <span>Snapify prélève 30 % de commission sur chaque vente.</span>
+              </div>
+            </div>
+          </div>
+          {!user ? (
+            <Link to="/login" className="btn-mp">
+              Connectez-vous pour continuer
+            </Link>
+          ) : user.role === 'publisher' || user.role === 'admin' ? (
+            <Link to="/developer/dashboard" className="btn-mp">
+              Accéder au dashboard vendeur
+            </Link>
+          ) : (
+            <>
+              <label className="mp-label">
+                Nom éditeur
+                <input className="mp-input" value={name} onChange={(e) => setName(e.target.value)} />
+              </label>
+              <button
+                type="button"
+                className="mp-btn-buy"
+                style={{ marginTop: 16 }}
+                disabled={busy}
+                onClick={async () => {
+                  setBusy(true);
+                  setErr('');
+                  try {
+                    const res = await api<{ link: string }>('/api/marketplace/developer/register', {
+                      method: 'POST',
+                      body: JSON.stringify({ displayName: name }),
+                    });
+                    if (res.link) window.location.href = res.link;
+                  } catch (e) {
+                    setErr(e instanceof ApiError ? e.message : 'Erreur');
+                  } finally {
+                    setBusy(false);
+                  }
+                }}
+              >
+                Payer {fee} avec Flouci
+              </button>
+              {err && <p style={{ color: '#dc2626', fontSize: 13 }}>{err}</p>}
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function AdminPage() {
+  const { user } = useAuth();
+  const [pending, setPending] = useState<Product[]>([]);
+  const [settings, setSettings] = useState({ commissionBps: 3000, developerFeeMillimes: 100000, flouciPublicKey: '' });
+  const [msg, setMsg] = useState('');
+
+  const load = async () => {
+    setPending((await api<{ items: Product[] }>('/api/marketplace/admin/products?status=pending')).items);
+    setSettings(await api<typeof settings>('/api/marketplace/admin/settings'));
+  };
+  useEffect(() => {
+    if (user?.role === 'admin') void load();
+  }, [user]);
+
+  if (!user) return <Navigate to="/login" replace />;
+  if (user.role !== 'admin') return <Navigate to="/" replace />;
+
+  return (
+    <div className="mp-wrap" style={{ maxWidth: 900, paddingBottom: 48 }}>
+      <h1>Admin marketplace</h1>
+      <div style={{ border: '1px solid #e5e7eb', borderRadius: 8, padding: 20, marginTop: 16 }}>
+        <h2 style={{ marginTop: 0, fontSize: '1.05rem' }}>Réglages</h2>
+        <label className="mp-label">
+          Commission (%)
+          <input
+            className="mp-input"
+            type="number"
+            min={0}
+            max={90}
+            step={0.5}
+            value={settings.commissionBps / 100}
+            onChange={(e) => setSettings({ ...settings, commissionBps: Math.round(Number(e.target.value) * 100) })}
+          />
+        </label>
+        <label className="mp-label">
+          Frais d’inscription développeur
+          <DtInput millimes={settings.developerFeeMillimes} onMillimes={(m) => setSettings({ ...settings, developerFeeMillimes: m })} />
+        </label>
+        <label className="mp-label">
+          Flouci public key
+          <input className="mp-input" value={settings.flouciPublicKey} onChange={(e) => setSettings({ ...settings, flouciPublicKey: e.target.value })} />
+        </label>
+        <button
+          type="button"
+          className="btn-mp"
+          style={{ marginTop: 14 }}
+          onClick={async () => {
+            await api('/api/marketplace/admin/settings', { method: 'PUT', body: JSON.stringify(settings) });
+            setMsg('Enregistré');
+          }}
+        >
+          Sauver
+        </button>
+      </div>
+      <h2 style={{ marginTop: 28 }}>Produits en attente</h2>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+        {pending.map((p) => (
+          <div key={p.id} style={{ display: 'flex', justifyContent: 'space-between', gap: 12, border: '1px solid #e5e7eb', borderRadius: 8, padding: 14, alignItems: 'center' }}>
+            <div>
+              <strong>{p.name}</strong>
+              <div style={{ fontSize: 13, color: '#6c6c6c' }}>{p.slug}</div>
+            </div>
+            <div style={{ display: 'flex', gap: 8 }}>
+              <button
+                type="button"
+                className="btn-mp"
+                onClick={async () => {
+                  await api(`/api/marketplace/admin/products/${p.id}/review`, { method: 'POST', body: JSON.stringify({ action: 'approve' }) });
+                  void load();
+                }}
+              >
+                Approuver
+              </button>
+              <button
+                type="button"
+                className="mp-btn-ghost"
+                style={{ width: 'auto', padding: '0 14px', color: '#dc2626' }}
+                onClick={async () => {
+                  await api(`/api/marketplace/admin/products/${p.id}/review`, { method: 'POST', body: JSON.stringify({ action: 'reject', reason: 'Non conforme' }) });
+                  void load();
+                }}
+              >
+                Rejeter
+              </button>
+            </div>
+          </div>
+        ))}
+        {!pending.length && <div className="mp-empty">Aucune soumission.</div>}
+      </div>
+      {msg && <p style={{ color: '#00a89d' }}>{msg}</p>}
+    </div>
+  );
+}
+
+function SuccessPage() {
+  const [params] = useSearchParams();
+  return (
+    <div className="mp-wrap" style={{ maxWidth: 520, textAlign: 'center', padding: '64px 20px' }}>
+      <BadgeCheck className="mx-auto h-14 w-14 text-px-primary-dark" />
+      <h1 style={{ fontSize: '1.75rem' }}>Paiement réussi</h1>
+      <p style={{ color: '#6c6c6c' }}>Référence {params.get('order') || params.get('publisher') || ''} confirmée.</p>
+      <Link to="/account" className="btn-mp" style={{ marginTop: 16, display: 'inline-flex' }}>
+        Voir mes achats
+      </Link>
+    </div>
+  );
+}
+
+export function App() {
+  return (
+    <Routes>
+      {/* Dashboard développeur : layout plein écran (hors shell marketplace) */}
+      <Route path="/developer/dashboard/*" element={<DeveloperRoutes />} />
+      <Route
+        path="*"
+        element={
+          <Shell>
+            <Routes>
+              <Route path="/" element={<Home />} />
+              <Route path="/catalog" element={<Catalog />} />
+              <Route path="/product/:slug" element={<ProductPage />} />
+              <Route path="/cart" element={<CartPage />} />
+              <Route path="/login" element={<AuthPage mode="login" />} />
+              <Route path="/register" element={<AuthPage mode="register" />} />
+              <Route path="/account" element={<AccountPage />} />
+              <Route path="/developer" element={<DeveloperLanding />} />
+              <Route path="/developer/register/success" element={<SuccessPage />} />
+              <Route path="/checkout/success" element={<SuccessPage />} />
+              <Route path="/checkout/fail" element={<div className="mp-wrap py-16 text-center">Paiement échoué</div>} />
+              <Route path="/admin" element={<AdminPage />} />
+              <Route path="*" element={<Navigate to="/" replace />} />
+            </Routes>
+          </Shell>
+        }
+      />
+    </Routes>
+  );
+}