create-snapify-app 0.0.0-stage → 1.1.0

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

@@ -0,0 +1,1264 @@
+/**
+ * Snapify Superadmin — /hamdisup90
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ */
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Navigate, NavLink, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
+import {
+  BarChart3,
+  Banknote,
+  ChevronDown,
+  CreditCard,
+  ExternalLink,
+  Eye,
+  FileCheck2,
+  FileText,
+  Globe2,
+  Inbox,
+  LayoutDashboard,
+  LifeBuoy,
+  Lock,
+  LogOut,
+  Mail,
+  Menu as MenuIcon,
+  Package,
+  Percent,
+  RefreshCw,
+  Search,
+  Send,
+  Server,
+  Settings2,
+  ShieldCheck,
+  ShoppingBag,
+  Store,
+  Trash2,
+  User,
+  Users,
+  Wallet,
+  X,
+} from 'lucide-react';
+import { SnapifyMark } from '../../../src/components/SnapifyLogo';
+import { useDtField } from '../../shared/ui';
+import {
+  Alert,
+  Badge,
+  Button,
+  Card,
+  cx,
+  EmptyState,
+  Field,
+  Input,
+  PageHeader,
+  PageSkeleton,
+  Section,
+  StatCard,
+  Switch,
+  Table,
+  Tabs,
+  Td,
+  Textarea,
+  Th,
+} from '../../../src/admin/ui/primitives';
+import { sa, dt, when } from './lib/api';
+import { UsersPage } from './pages/UsersPage';
+import { PublishersPage } from './pages/PublishersPage';
+import { OrdersPage } from './pages/OrdersPage';
+import { PayoutsPage } from './pages/PayoutsPage';
+import { SystemPage } from './pages/SystemPage';
+import { TicketsPage } from './pages/TicketsPage';
+import { NewsletterPage } from './pages/NewsletterPage';
+import { InvoicesPage } from './pages/InvoicesPage';
+import { PaymentsPage } from './pages/PaymentsPage';
+import { SettingsPage } from './pages/SettingsPage';
+import { SeoControlPage } from './pages/SeoControlPage';
+import { ClientsPage } from './pages/ClientsPage';
+
+const STATUS: Record<string, ['success' | 'warning' | 'danger' | 'neutral' | 'info', string]> = {
+  paid: ['success', 'Payée'],
+  published: ['success', 'Publié'],
+  active: ['success', 'Actif'],
+  pending: ['warning', 'En attente'],
+  draft: ['neutral', 'Brouillon'],
+  rejected: ['danger', 'Rejeté'],
+  failed: ['danger', 'Échouée'],
+};
+
+function StatusBadge({ status }: { status: string }) {
+  const [tone, label] = STATUS[status] || ['neutral', status];
+  return (
+    <Badge tone={tone} dot>
+      {label}
+    </Badge>
+  );
+}
+
+/* ------------------------------------------------------------------ Shell */
+
+const NAV = [
+  {
+    title: '',
+    items: [{ to: '/', label: 'Tableau de bord', icon: LayoutDashboard }],
+  },
+  {
+    title: 'Ventes',
+    items: [
+      { to: '/demandes', label: 'Demandes licence', icon: Inbox },
+      { to: '/clients', label: 'Clients', icon: User },
+      { to: '/commandes', label: 'Commandes MP', icon: ShoppingBag },
+      { to: '/factures', label: 'Factures', icon: FileText },
+      { to: '/paiements', label: 'Paiements Flouci', icon: CreditCard },
+      { to: '/payouts', label: 'Payouts', icon: Banknote },
+      { to: '/finances', label: 'Commissions & frais', icon: Wallet },
+    ],
+  },
+  {
+    title: 'Marketplace',
+    items: [
+      { to: '/catalogue', label: 'Modules & thèmes', icon: Package },
+      { to: '/editeurs', label: 'Éditeurs', icon: Store },
+    ],
+  },
+  {
+    title: 'Ops',
+    items: [
+      { to: '/tickets', label: 'Tickets', icon: LifeBuoy },
+      { to: '/newsletter', label: 'Newsletter', icon: Mail },
+      { to: '/parametrage', label: 'Paramétrage', icon: Settings2 },
+    ],
+  },
+  {
+    title: 'Plateforme',
+    items: [
+      { to: '/utilisateurs', label: 'Utilisateurs', icon: Users },
+      { to: '/systeme', label: 'Système', icon: Server },
+    ],
+  },
+  {
+    title: 'Croissance',
+    items: [
+      { to: '/visites', label: 'Visites', icon: BarChart3 },
+      { to: '/seo', label: 'SEO & Backlinks', icon: Search },
+    ],
+  },
+];
+const ALL_NAV = NAV.flatMap((g) => g.items);
+
+function Sidebar({ onNavigate }: { onNavigate?: () => void }) {
+  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">Superadmin plateforme</p>
+        </div>
+      </div>
+      <nav className="flex-1 space-y-6 overflow-y-auto px-3 py-4 scrollbar-thin">
+        {NAV.map((group) => (
+          <div key={group.title || 'root'}>
+            {group.title ? <p className="mb-1.5 px-3 text-[11px] font-semibold uppercase tracking-wider text-slate-500">{group.title}</p> : null}
+            <div className="space-y-0.5">
+              {group.items.map((item) => (
+                <NavLink
+                  key={item.to}
+                  to={item.to}
+                  end={item.to === '/'}
+                  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', isActive ? 'text-brand-400' : 'text-slate-500 group-hover:text-slate-300')} />
+                      {item.label}
+                    </>
+                  )}
+                </NavLink>
+              ))}
+            </div>
+          </div>
+        ))}
+      </nav>
+      <div className="space-y-0.5 border-t border-white/5 p-3">
+        {[
+          { href: 'https://snapify.tn/', label: 'snapify.tn' },
+          { href: 'https://marketplace.snapify.tn/', label: 'Marketplace' },
+          { href: 'https://community.snapify.tn/', label: 'Communauté' },
+        ].map((l) => (
+          <a
+            key={l.href}
+            href={l.href}
+            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"
+          >
+            {l.label} <ExternalLink className="h-3.5 w-3.5" />
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function Shell({ children, onLogout }: { children: React.ReactNode; onLogout: () => void }) {
+  const location = useLocation();
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+  useEffect(() => {
+    setMobileOpen(false);
+    setMenuOpen(false);
+  }, [location.pathname]);
+
+  const current = ALL_NAV.filter((n) => (n.to === '/' ? location.pathname === '/' : location.pathname.startsWith(n.to))).sort((a, b) => b.to.length - a.to.length)[0];
+  useEffect(() => {
+    document.title = `${current?.label || 'Superadmin'} · Snapify`;
+  }, [current]);
+
+  return (
+    <div className="min-h-screen bg-slate-50">
+      <aside className="fixed inset-y-0 left-0 z-30 hidden w-64 lg:block">
+        <Sidebar />
+      </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">
+            <Sidebar onNavigate={() => setMobileOpen(false)} />
+            <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">Superadmin</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://snapify.tn/" target="_blank" rel="noreferrer" className="hidden sm:block">
+              <Button size="sm" icon={ExternalLink}>
+                Voir snapify.tn
+              </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">SA</span>
+                <span className="hidden text-left leading-tight md:block">
+                  <span className="block text-[13px] font-medium text-slate-800">hamdisup90</span>
+                  <span className="block text-[11px] text-slate-500">Superadmin</span>
+                </span>
+                <ChevronDown className="h-4 w-4 text-slate-400" />
+              </button>
+              {menuOpen ? (
+                <>
+                  <div className="fixed inset-0 z-40" onClick={() => setMenuOpen(false)} />
+                  <div className="absolute right-0 z-50 mt-1.5 w-56 rounded-xl border border-slate-200 bg-white p-1.5 shadow-lg">
+                    <div className="border-b border-slate-100 px-2.5 pb-2 pt-1.5 text-xs text-slate-500">Accès plateforme complet</div>
+                    <button type="button" onClick={onLogout} className="mt-1 flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-sm text-rose-600 hover:bg-rose-50">
+                      <LogOut className="h-4 w-4" /> Se déconnecter
+                    </button>
+                  </div>
+                </>
+              ) : null}
+            </div>
+          </div>
+        </header>
+        <main className="mx-auto max-w-[1400px] px-4 pb-28 pt-6 sm:px-6 lg:px-8">{children}</main>
+      </div>
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ Types */
+
+type Visits = {
+  last24h: number;
+  last7d: number;
+  total: number;
+  topPaths: { path: string; n: number }[];
+  topCountries: { country: string; n: number }[];
+  recent: { ts: string; path: string; country?: string; ref?: string }[];
+};
+
+type OverviewData = {
+  visits: Visits;
+  marketplace: {
+    products: number;
+    publishers: number;
+    activePublishers?: number;
+    pendingReview: number;
+    commissionLabel: string;
+    developerFeeLabel: string;
+    paidOrders: number;
+    revenue30dMillimes?: number;
+    commission30dMillimes?: number;
+  };
+  licenses: { total: number; paid: number; pending: number; revenueMillimes: number };
+  users?: { total: number };
+  payouts?: { pending: number; pendingMillimes: number };
+};
+
+type LicenseOrder = {
+  id: string;
+  name: string;
+  email: string;
+  domain: string;
+  hostingNotes: string;
+  status: string;
+  amountMillimes: number;
+  createdAt: string;
+  paidAt?: string;
+  details?: {
+    company?: string;
+    phone: string;
+    gouvernorat: string;
+    city?: string;
+    siteType: string;
+    domainStatus: 'owned' | 'to-register';
+    providerId: string;
+    providerName: string;
+    hostingType: string;
+    accessType: string;
+    serverIp?: string;
+    theme?: string;
+    message?: string;
+  };
+};
+
+function useLoad<T>(load: () => Promise<T>, deps: unknown[] = []) {
+  const [data, setData] = useState<T | null>(null);
+  const [error, setError] = useState('');
+  const reload = useCallback(() => {
+    setError('');
+    load()
+      .then(setData)
+      .catch((e: Error) => setError(e.message));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+  useEffect(() => {
+    reload();
+  }, [reload]);
+  return { data, error, reload };
+}
+
+function BarList({ rows, empty }: { rows: { label: string; n: number }[]; empty: string }) {
+  const max = Math.max(1, ...rows.map((r) => r.n));
+  if (!rows.length) return <p className="py-6 text-center text-sm text-slate-500">{empty}</p>;
+  return (
+    <ul className="space-y-2.5">
+      {rows.map((r) => (
+        <li key={r.label}>
+          <div className="flex items-center justify-between gap-3 text-sm">
+            <span className="truncate text-slate-700">{r.label}</span>
+            <span className="tabular-nums font-medium text-slate-900">{r.n}</span>
+          </div>
+          <div className="mt-1 h-1.5 overflow-hidden rounded-full bg-slate-100">
+            <div className="h-full rounded-full bg-brand-500" style={{ width: `${(r.n / max) * 100}%` }} />
+          </div>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+/* ------------------------------------------------------------------ Pages */
+
+function Overview() {
+  const { data, error, reload } = useLoad(() => sa<OverviewData>('/overview'));
+  const orders = useLoad(() => sa<{ items: LicenseOrder[] }>('/licenses'));
+  const navigate = useNavigate();
+  if (error) return <Alert tone="danger" title="Chargement impossible" action={<Button size="sm" onClick={reload}>Réessayer</Button>}>{error}</Alert>;
+  if (!data) return <PageSkeleton />;
+  const { visits: v, marketplace: m, licenses: l } = data;
+  const payouts = data.payouts || { pending: 0, pendingMillimes: 0 };
+  return (
+    <div className="space-y-6">
+      <PageHeader title="Tableau de bord" description="Vue d’ensemble SaaS : licences, marketplace, payouts et trafic landing." />
+      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+        <StatCard label="Licences payées" value={l.paid} icon={FileCheck2} hint={`${l.pending} en attente de paiement`} />
+        <StatCard label="CA licences" value={dt(l.revenueMillimes)} icon={Banknote} tone="violet" hint={`${l.total} demandes au total`} />
+        <StatCard
+          label="CA marketplace (30 j)"
+          value={dt(m.revenue30dMillimes || 0)}
+          icon={ShoppingBag}
+          tone="sky"
+          hint={`Commission ${dt(m.commission30dMillimes || 0)}`}
+        />
+        <StatCard
+          label="Payouts à traiter"
+          value={payouts.pending}
+          icon={Wallet}
+          tone="amber"
+          hint={payouts.pending ? dt(payouts.pendingMillimes) : 'File vide'}
+        />
+      </div>
+      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+        <StatCard label="Visites (7 j)" value={v.last7d} icon={Eye} hint={`${v.last24h} / 24 h`} />
+        <StatCard label="Produits" value={m.products} icon={Package} tone="sky" hint={`${m.pendingReview} en validation`} />
+        <StatCard label="Éditeurs actifs" value={m.activePublishers ?? m.publishers} icon={Store} tone="violet" hint={`${m.publishers} au total`} />
+        <StatCard label="Utilisateurs" value={data.users?.total ?? '—'} icon={Users} tone="amber" />
+      </div>
+      <div className="grid gap-4 lg:grid-cols-3">
+        <Section
+          className="lg:col-span-2"
+          title="Dernières demandes de licence"
+          description="Formulaire de commande snapify.tn/commander"
+          actions={
+            <Button size="sm" onClick={() => navigate('/demandes')}>
+              Tout voir
+            </Button>
+          }
+        >
+          {!orders.data ? (
+            <p className="text-sm text-slate-500">Chargement…</p>
+          ) : orders.data.items.length ? (
+            <ul className="-my-2 divide-y divide-slate-100">
+              {orders.data.items.slice(0, 5).map((o) => (
+                <li key={o.id} className="flex flex-wrap items-center gap-3 py-3">
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-sm font-medium text-slate-900">
+                      {o.name}
+                      {o.details?.company ? <span className="font-normal text-slate-500"> · {o.details.company}</span> : null}
+                    </p>
+                    <p className="truncate text-xs text-slate-500">
+                      {o.domain} · {o.details?.providerName || 'hébergeur non renseigné'}
+                    </p>
+                  </div>
+                  <StatusBadge status={o.status} />
+                  <span className="w-28 text-right text-xs text-slate-400">{when(o.createdAt)}</span>
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <EmptyState icon={Inbox} title="Aucune demande" description="Les commandes passées depuis la landing apparaîtront ici." />
+          )}
+        </Section>
+        <Section
+          title="Marketplace"
+          description="Réglages et activité"
+          actions={
+            payouts.pending ? (
+              <Button size="sm" onClick={() => navigate('/payouts')}>
+                Voir payouts
+              </Button>
+            ) : (
+              <Button size="sm" onClick={() => navigate('/catalogue')}>
+                Catalogue
+              </Button>
+            )
+          }
+        >
+          <dl className="space-y-3 text-sm">
+            {[
+              ['Commission', m.commissionLabel],
+              ['Frais développeur', m.developerFeeLabel],
+              ['Éditeurs', String(m.publishers)],
+              ['Commandes payées', String(m.paidOrders)],
+              ['En validation', String(m.pendingReview)],
+              ['Payouts en attente', String(payouts.pending)],
+            ].map(([k, val]) => (
+              <div key={k} className="flex items-center justify-between">
+                <dt className="text-slate-500">{k}</dt>
+                <dd className="font-medium tabular-nums text-slate-900">{val}</dd>
+              </div>
+            ))}
+          </dl>
+        </Section>
+      </div>
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Section title="Pages les plus vues" description="7 derniers jours">
+          <BarList rows={v.topPaths.slice(0, 6).map((p) => ({ label: p.path, n: p.n }))} empty="Pas encore de visites." />
+        </Section>
+        <Section title="Pays" description="7 derniers jours">
+          <BarList rows={v.topCountries.slice(0, 6).map((p) => ({ label: p.country || 'Inconnu', n: p.n }))} empty="Pas encore de visites." />
+        </Section>
+      </div>
+    </div>
+  );
+}
+
+function Finances() {
+  const navigate = useNavigate();
+  const [form, setForm] = useState({ commissionBps: 3000, developerFeeMillimes: 100000, flouciPublicKey: '', flouciPrivateKey: '', bankFallback: '', hasFlouciPrivateKey: false });
+  const developerFee = useDtField(form.developerFeeMillimes, (m) => setForm((f) => ({ ...f, developerFeeMillimes: m })));
+  const [msg, setMsg] = useState<{ tone: 'success' | 'danger'; text: string } | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [rev, setRev] = useState<{ grossLabel: string; commissionLabel: string; orders: number } | null>(null);
+  const load = useCallback(() => {
+    void sa<typeof form>('/settings').then((s) => setForm((f) => ({ ...f, ...s, flouciPrivateKey: '' })));
+    void sa<typeof rev>('/revenue').then(setRev);
+  }, []);
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const save = async () => {
+    setSaving(true);
+    setMsg(null);
+    try {
+      const body: Record<string, unknown> = {
+        commissionBps: form.commissionBps,
+        developerFeeMillimes: form.developerFeeMillimes,
+        flouciPublicKey: form.flouciPublicKey,
+        bankFallback: form.bankFallback,
+      };
+      if (form.flouciPrivateKey) body.flouciPrivateKey = form.flouciPrivateKey;
+      await sa('/settings', { method: 'PUT', body: JSON.stringify(body) });
+      setMsg({ tone: 'success', text: 'Réglages enregistrés.' });
+      load();
+    } catch (e) {
+      setMsg({ tone: 'danger', text: e instanceof Error ? e.message : 'Erreur' });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title="Commissions & frais"
+        description="Pourcentage prélevé sur les ventes marketplace, frais d’inscription développeur et compte de paiement Flouci."
+        actions={
+          <>
+            <Button onClick={() => navigate('/payouts')}>Payouts</Button>
+            <Button variant="primary" loading={saving} onClick={save}>
+              Enregistrer
+            </Button>
+          </>
+        }
+      />
+      {rev ? (
+        <div className="grid gap-4 sm:grid-cols-3">
+          <StatCard label="Chiffre d’affaires (30 j)" value={rev.grossLabel} icon={Banknote} />
+          <StatCard label="Commissions (30 j)" value={rev.commissionLabel} icon={Percent} tone="violet" />
+          <StatCard label="Commandes payées" value={rev.orders} icon={FileCheck2} tone="sky" />
+        </div>
+      ) : null}
+      {msg ? <Alert tone={msg.tone}>{msg.text}</Alert> : null}
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Section title="Marketplace" description="S’applique aux nouvelles commandes.">
+          <Field label="Commission marketplace" hint="Part prélevée par NOVALABS sur chaque vente (le reste revient au développeur).">
+            <Input
+              type="number"
+              prefix="%"
+              min={0}
+              max={90}
+              step={0.5}
+              value={form.commissionBps / 100}
+              onChange={(e) => setForm({ ...form, commissionBps: Math.round(Number(e.target.value) * 100) })}
+            />
+          </Field>
+          <Field label="Frais d’inscription développeur" hint={`Payé une fois via Flouci : ${dt(form.developerFeeMillimes)}. 0 = inscription gratuite.`}>
+            <Input prefix="DT" {...developerFee} />
+          </Field>
+        </Section>
+        <Section title="Paiement Flouci" description="Clés du compte marchand utilisé pour les licences et la marketplace.">
+          <Field label="Clé publique (app token)">
+            <Input value={form.flouciPublicKey} onChange={(e) => setForm({ ...form, flouciPublicKey: e.target.value })} className="font-mono" />
+          </Field>
+          <Field label="Clé privée (app secret)" hint={form.hasFlouciPrivateKey ? 'Une clé est déjà enregistrée — laissez vide pour la conserver.' : 'Aucune clé enregistrée.'}>
+            <Input type="password" value={form.flouciPrivateKey} onChange={(e) => setForm({ ...form, flouciPrivateKey: e.target.value })} placeholder="••••••••" autoComplete="new-password" />
+          </Field>
+          <Field label="IBAN / virement de secours">
+            <Input value={form.bankFallback} onChange={(e) => setForm({ ...form, bankFallback: e.target.value })} />
+          </Field>
+        </Section>
+      </div>
+    </div>
+  );
+}
+
+function Visites() {
+  const { data, error } = useLoad(() => sa<OverviewData>('/overview').then((d) => d.visits));
+  if (error) return <Alert tone="danger">{error}</Alert>;
+  if (!data) return <PageSkeleton />;
+  return (
+    <div className="space-y-6">
+      <PageHeader title="Visites" description="Trafic de la landing snapify.tn et des pages marketing." />
+      <div className="grid gap-4 sm:grid-cols-3">
+        <StatCard label="Dernières 24 h" value={data.last24h} icon={Eye} />
+        <StatCard label="7 derniers jours" value={data.last7d} icon={BarChart3} tone="sky" />
+        <StatCard label="Total enregistré" value={data.total} icon={Globe2} tone="violet" />
+      </div>
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Section title="Pages les plus vues" description="7 derniers jours">
+          <BarList rows={data.topPaths.map((p) => ({ label: p.path, n: p.n }))} empty="Pas encore de visites." />
+        </Section>
+        <Section title="Pays" description="7 derniers jours">
+          <BarList rows={data.topCountries.map((p) => ({ label: p.country || 'Inconnu', n: p.n }))} empty="Pas encore de visites." />
+        </Section>
+      </div>
+      <Card padded={false}>
+        <div className="border-b border-slate-100 px-5 py-4">
+          <h2 className="text-[15px] font-semibold text-slate-900">Visites récentes</h2>
+        </div>
+        <Table>
+          <thead>
+            <tr>
+              <Th>Date</Th>
+              <Th>Page</Th>
+              <Th>Pays</Th>
+              <Th>Provenance</Th>
+            </tr>
+          </thead>
+          <tbody>
+            {data.recent.map((r, i) => (
+              <tr key={i} className="hover:bg-slate-50/60">
+                <Td className="whitespace-nowrap text-slate-500">{when(r.ts)}</Td>
+                <Td className="font-mono text-xs">{r.path}</Td>
+                <Td>{r.country || '—'}</Td>
+                <Td className="max-w-[260px] truncate text-slate-500">{r.ref || '—'}</Td>
+              </tr>
+            ))}
+            {!data.recent.length ? (
+              <tr>
+                <Td colSpan={4} className="py-10 text-center text-slate-500">
+                  Aucune visite enregistrée.
+                </Td>
+              </tr>
+            ) : null}
+          </tbody>
+        </Table>
+      </Card>
+    </div>
+  );
+}
+
+const SITE_TYPE: Record<string, string> = { vitrine: 'Site vitrine', boutique: 'Boutique en ligne', blog: 'Blog / média', multi: 'Multi-sites / agence' };
+const HOSTING_TYPE: Record<string, string> = { mutualise: 'Mutualisé', vps: 'VPS', dedie: 'Serveur dédié', cloud: 'Cloud', unknown: 'Non précisé' };
+const ACCESS_TYPE: Record<string, string> = { cpanel: 'cPanel', plesk: 'Plesk', directadmin: 'DirectAdmin', ssh: 'SSH / root', unknown: 'Non précisé' };
+
+function OrderDetails({ o }: { o: LicenseOrder }) {
+  const d = o.details;
+  if (!d) return <p className="whitespace-pre-wrap text-sm text-slate-600">{o.hostingNotes || 'Aucun détail.'}</p>;
+  const block = (title: string, icon: React.ReactNode, rows: [string, React.ReactNode][]) => (
+    <div>
+      <p className="mb-2 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-slate-500">
+        {icon} {title}
+      </p>
+      <dl className="space-y-1.5 text-sm">
+        {rows.map(([k, v]) => (
+          <div key={k} className="flex gap-3">
+            <dt className="w-28 shrink-0 text-slate-500">{k}</dt>
+            <dd className="min-w-0 break-words font-medium text-slate-800">{v || '—'}</dd>
+          </div>
+        ))}
+      </dl>
+    </div>
+  );
+  return (
+    <div className="grid gap-6 md:grid-cols-3">
+      {block('Client', <User className="h-3.5 w-3.5" />, [
+        ['Nom', o.name],
+        ['Société', d.company],
+        ['E-mail', <a className="text-brand-700 hover:underline" href={`mailto:${o.email}`}>{o.email}</a>],
+        ['Téléphone', <a className="text-brand-700 hover:underline" href={`tel:${d.phone.replace(/\s/g, '')}`}>{d.phone}</a>],
+        ['Localisation', [d.city, d.gouvernorat].filter(Boolean).join(', ')],
+      ])}
+      {block('Projet', <Globe2 className="h-3.5 w-3.5" />, [
+        ['Type', SITE_TYPE[d.siteType] || d.siteType],
+        ['Domaine', o.domain],
+        ['Statut domaine', d.domainStatus === 'owned' ? 'Déjà enregistré' : 'À enregistrer'],
+        ['Thème', d.theme ? d.theme.charAt(0).toUpperCase() + d.theme.slice(1) : '—'],
+        ['Montant', dt(o.amountMillimes)],
+      ])}
+      {block('Hébergement', <Lock className="h-3.5 w-3.5" />, [
+        ['Hébergeur', d.providerName],
+        ['Type', HOSTING_TYPE[d.hostingType] || d.hostingType],
+        ['Accès', ACCESS_TYPE[d.accessType] || d.accessType],
+        ['IP serveur', d.serverIp ? <span className="font-mono text-xs">{d.serverIp}</span> : '—'],
+      ])}
+      {d.message ? (
+        <div className="md:col-span-3">
+          <p className="mb-1.5 text-xs font-semibold uppercase tracking-wide text-slate-500">Précisions du client</p>
+          <p className="whitespace-pre-wrap rounded-lg bg-slate-50 p-3 text-sm text-slate-700">{d.message}</p>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function Demandes() {
+  const { data, error, reload } = useLoad(() => sa<{ items: LicenseOrder[] }>('/licenses'));
+  const [tab, setTab] = useState<'all' | 'paid' | 'pending' | 'failed'>('all');
+  const [q, setQ] = useState('');
+  const [open, setOpen] = useState<string | null>(null);
+  const [busy, setBusy] = useState<string | null>(null);
+  const [flash, setFlash] = useState('');
+  const items = data?.items || [];
+  const filtered = useMemo(() => {
+    const nq = q.trim().toLowerCase();
+    return items.filter(
+      (o) =>
+        (tab === 'all' || o.status === tab) &&
+        (!nq || [o.name, o.email, o.domain, o.details?.company, o.details?.providerName, o.details?.phone].some((x) => x?.toLowerCase().includes(nq)))
+    );
+  }, [items, tab, q]);
+  const count = (s: string) => items.filter((o) => o.status === s).length;
+  const setStatus = async (o: LicenseOrder, status: 'paid' | 'pending' | 'failed') => {
+    setBusy(o.id);
+    setFlash('');
+    try {
+      await sa(`/licenses/${o.id}`, { method: 'PATCH', body: JSON.stringify({ status }) });
+      setFlash(`${o.name} → ${status}`);
+      reload();
+    } catch (e) {
+      setFlash(e instanceof Error ? e.message : 'Erreur');
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  return (
+    <div>
+      <PageHeader
+        title="Demandes de licence"
+        description="Commandes d’installation Snapify (699 DT / an) passées depuis snapify.tn/commander."
+        actions={
+          <Button icon={RefreshCw} onClick={reload}>
+            Actualiser
+          </Button>
+        }
+      />
+      {error ? <Alert tone="danger">{error}</Alert> : null}
+      {flash ? (
+        <div className="mb-4">
+          <Alert tone={flash.includes('Erreur') ? 'danger' : 'success'}>{flash}</Alert>
+        </div>
+      ) : null}
+      <Tabs
+        value={tab}
+        onChange={setTab}
+        tabs={[
+          { value: 'all', label: 'Toutes', badge: <Badge>{items.length}</Badge> },
+          { value: 'paid', label: 'Payées', badge: <Badge tone="success">{count('paid')}</Badge> },
+          { value: 'pending', label: 'En attente', badge: <Badge tone="warning">{count('pending')}</Badge> },
+          { value: 'failed', label: 'Échouées', badge: <Badge tone="danger">{count('failed')}</Badge> },
+        ]}
+      />
+      <Card padded={false}>
+        <div className="border-b border-slate-100 p-3">
+          <div className="relative max-w-sm">
+            <Search className="pointer-events-none absolute left-3 top-2.5 h-4 w-4 text-slate-400" />
+            <Input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Nom, e-mail, domaine, hébergeur…" className="pl-9" />
+          </div>
+        </div>
+        {!data ? (
+          <div className="p-5">
+            <PageSkeleton />
+          </div>
+        ) : filtered.length ? (
+          <Table>
+            <thead>
+              <tr>
+                <Th>Client</Th>
+                <Th>Domaine</Th>
+                <Th className="hidden md:table-cell">Hébergeur</Th>
+                <Th>Statut</Th>
+                <Th className="hidden sm:table-cell">Date</Th>
+                <Th />
+              </tr>
+            </thead>
+            <tbody>
+              {filtered.map((o) => (
+                <React.Fragment key={o.id}>
+                  <tr className={cx('cursor-pointer hover:bg-slate-50/60', open === o.id && 'bg-slate-50/60')} onClick={() => setOpen(open === o.id ? null : o.id)}>
+                    <Td>
+                      <p className="font-medium text-slate-900">{o.name}</p>
+                      <p className="text-xs text-slate-500">{o.details?.company || o.email}</p>
+                    </Td>
+                    <Td className="font-mono text-xs">{o.domain}</Td>
+                    <Td className="hidden md:table-cell">
+                      {o.details ? (
+                        <>
+                          <p className="text-slate-800">{o.details.providerName}</p>
+                          <p className="text-xs text-slate-500">{HOSTING_TYPE[o.details.hostingType] || o.details.hostingType}</p>
+                        </>
+                      ) : (
+                        <span className="text-slate-400">—</span>
+                      )}
+                    </Td>
+                    <Td>
+                      <StatusBadge status={o.status} />
+                    </Td>
+                    <Td className="hidden whitespace-nowrap text-slate-500 sm:table-cell">{when(o.createdAt)}</Td>
+                    <Td className="text-right">
+                      <ChevronDown className={cx('ml-auto h-4 w-4 text-slate-400 transition-transform', open === o.id && 'rotate-180')} />
+                    </Td>
+                  </tr>
+                  {open === o.id ? (
+                    <tr>
+                      <td colSpan={6} className="border-b border-slate-100 bg-slate-50/40 px-5 py-5">
+                        <OrderDetails o={o} />
+                        <div className="mt-4 flex flex-wrap gap-2 border-t border-slate-200 pt-4">
+                          {o.status !== 'paid' ? (
+                            <Button size="sm" variant="secondary" loading={busy === o.id} onClick={() => void setStatus(o, 'paid')}>
+                              Marquer payée (virement)
+                            </Button>
+                          ) : null}
+                          {o.status === 'paid' ? (
+                            <Button size="sm" loading={busy === o.id} onClick={() => void setStatus(o, 'pending')}>
+                              Remettre en attente
+                            </Button>
+                          ) : null}
+                          {o.status !== 'failed' ? (
+                            <Button size="sm" variant="danger" disabled={busy === o.id} onClick={() => void setStatus(o, 'failed')}>
+                              Marquer échouée
+                            </Button>
+                          ) : null}
+                          {o.status === 'pending' ? (
+                            <Button
+                              size="sm"
+                              icon={Send}
+                              loading={busy === o.id}
+                              onClick={async () => {
+                                setBusy(o.id);
+                                setFlash('');
+                                try {
+                                  const r = await sa<{ mailed: boolean; reason?: string }>(`/licenses/${o.id}/relaunch`, { method: 'POST', body: '{}' });
+                                  setFlash(r.mailed ? `Relance envoyée à ${o.email}` : `Relance non envoyée : ${r.reason || 'SMTP'}`);
+                                } catch (e) {
+                                  setFlash(e instanceof Error ? e.message : 'Erreur');
+                                } finally {
+                                  setBusy(null);
+                                }
+                              }}
+                            >
+                              Relancer par e-mail
+                            </Button>
+                          ) : null}
+                          <Button
+                            size="sm"
+                            icon={FileText}
+                            loading={busy === o.id}
+                            onClick={async () => {
+                              setBusy(o.id);
+                              setFlash('');
+                              try {
+                                const r = await sa<{ invoice: { number: string } }>(`/licenses/${o.id}/invoice`, { method: 'POST', body: '{}' });
+                                setFlash(`Facture ${r.invoice.number} créée.`);
+                              } catch (e) {
+                                setFlash(e instanceof Error ? e.message : 'Erreur');
+                              } finally {
+                                setBusy(null);
+                              }
+                            }}
+                          >
+                            Générer facture
+                          </Button>
+                          <Button
+                            size="sm"
+                            onClick={async () => {
+                              const name = window.prompt('Nom client', o.name);
+                              if (name === null) return;
+                              const email = window.prompt('E-mail', o.email);
+                              if (email === null) return;
+                              const domain = window.prompt('Domaine', o.domain);
+                              if (domain === null) return;
+                              setBusy(o.id);
+                              setFlash('');
+                              try {
+                                await sa(`/licenses/${o.id}`, { method: 'PATCH', body: JSON.stringify({ name, email, domain }) });
+                                setFlash('Demande mise à jour.');
+                                reload();
+                              } catch (e) {
+                                setFlash(e instanceof Error ? e.message : 'Erreur');
+                              } finally {
+                                setBusy(null);
+                              }
+                            }}
+                          >
+                            Éditer
+                          </Button>
+                          <Button
+                            size="sm"
+                            variant="danger"
+                            icon={Trash2}
+                            disabled={busy === o.id}
+                            onClick={async () => {
+                              if (!window.confirm(`Supprimer la demande de ${o.name} ?`)) return;
+                              setBusy(o.id);
+                              setFlash('');
+                              try {
+                                await sa(`/licenses/${o.id}`, { method: 'DELETE' });
+                                setFlash('Demande supprimée.');
+                                setOpen(null);
+                                reload();
+                              } catch (e) {
+                                setFlash(e instanceof Error ? e.message : 'Erreur');
+                              } finally {
+                                setBusy(null);
+                              }
+                            }}
+                          >
+                            Supprimer
+                          </Button>
+                        </div>
+                      </td>
+                    </tr>
+                  ) : null}
+                </React.Fragment>
+              ))}
+            </tbody>
+          </Table>
+        ) : (
+          <EmptyState icon={Inbox} title="Aucune demande" description={q || tab !== 'all' ? 'Aucun résultat pour ce filtre.' : 'Les commandes passées depuis la landing apparaîtront ici.'} />
+        )}
+      </Card>
+    </div>
+  );
+}
+
+type Product = {
+  id: string;
+  name: string;
+  slug: string;
+  kind: string;
+  status: string;
+  priceLabel: string;
+  latestVersion: { version: string; signed: boolean; sha256: string } | null;
+  unsignedVersions: string[];
+};
+
+function Catalogue() {
+  const [filter, setFilter] = useState('all');
+  const { data, error, reload } = useLoad(() => sa<{ items: Product[] }>(`/products?status=${filter}`), [filter]);
+  const [msg, setMsg] = useState('');
+  const [failure, setFailure] = useState('');
+  const [busy, setBusy] = useState<string | null>(null);
+  const [syncing, setSyncing] = useState(false);
+  const review = async (p: Product, action: 'approve' | 'reject' | 'unpublish') => {
+    setBusy(p.id);
+    setMsg('');
+    setFailure('');
+    try {
+      const r = await sa<{ signed?: string[] }>(`/products/${p.id}/review`, {
+        method: 'POST',
+        body: JSON.stringify(action === 'approve' ? { action } : action === 'reject' ? { action, reason: 'Non conforme' } : { action }),
+      });
+      setMsg(
+        action === 'reject'
+          ? `${p.name} rejeté.`
+          : action === 'unpublish'
+            ? `${p.name} dépublié (brouillon).`
+            : r.signed?.length
+              ? `${p.name} publié : version${r.signed.length > 1 ? 's' : ''} ${r.signed.join(', ')} signée${r.signed.length > 1 ? 's' : ''} par NOVALABS.`
+              : `${p.name} publié.`
+      );
+      reload();
+    } catch (e) {
+      setFailure(`${p.name} : ${e instanceof Error ? e.message : 'action impossible'}`);
+    } finally {
+      setBusy(null);
+    }
+  };
+  return (
+    <div>
+      <PageHeader
+        title="Modules & thèmes"
+        description="Validation des soumissions, signatures et synchronisation du catalogue officiel NOVALABS."
+        actions={
+          <Button
+            variant="secondary"
+            icon={RefreshCw}
+            loading={syncing}
+            onClick={async () => {
+              setSyncing(true);
+              try {
+                const r = await sa<{ synced: number }>('/sync-official', { method: 'POST', body: '{}' });
+                setMsg(`Catalogue officiel synchronisé : ${r.synced} produits.`);
+                reload();
+              } finally {
+                setSyncing(false);
+              }
+            }}
+          >
+            Synchroniser le catalogue
+          </Button>
+        }
+      />
+      {msg ? (
+        <div className="mb-4">
+          <Alert tone="success">{msg}</Alert>
+        </div>
+      ) : null}
+      {error ? <Alert tone="danger">{error}</Alert> : null}
+      {failure ? (
+        <div className="mb-4">
+          <Alert tone="danger">{failure}</Alert>
+        </div>
+      ) : null}
+      <Tabs
+        value={filter}
+        onChange={setFilter}
+        tabs={[
+          { value: 'all', label: 'Tous' },
+          { value: 'pending', label: 'En validation' },
+          { value: 'unsigned', label: 'À signer' },
+          { value: 'published', label: 'Publiés' },
+          { value: 'draft', label: 'Brouillons' },
+          { value: 'rejected', label: 'Rejetés' },
+        ]}
+      />
+      <Card padded={false}>
+        {!data ? (
+          <div className="p-5">
+            <PageSkeleton />
+          </div>
+        ) : data.items.length ? (
+          <Table>
+            <thead>
+              <tr>
+                <Th>Produit</Th>
+                <Th>Type</Th>
+                <Th>Prix</Th>
+                <Th className="hidden md:table-cell">Version</Th>
+                <Th className="hidden md:table-cell">Signature</Th>
+                <Th>Statut</Th>
+                <Th />
+              </tr>
+            </thead>
+            <tbody>
+              {data.items.map((p) => (
+                <tr key={p.id} className="hover:bg-slate-50/60">
+                  <Td>
+                    <p className="font-medium text-slate-900">{p.name}</p>
+                    <p className="font-mono text-[11px] text-slate-500">{p.slug}</p>
+                  </Td>
+                  <Td>
+                    <Badge tone={p.kind === 'theme' ? 'info' : 'brand'}>{p.kind === 'theme' ? 'Thème' : 'Module'}</Badge>
+                  </Td>
+                  <Td className="whitespace-nowrap">{p.priceLabel}</Td>
+                  <Td className="hidden md:table-cell">{p.latestVersion ? `v${p.latestVersion.version}` : '—'}</Td>
+                  <Td className="hidden md:table-cell">
+                    {p.unsignedVersions.length ? (
+                      <Badge tone="warning">À signer : v{p.unsignedVersions.join(', v')}</Badge>
+                    ) : p.latestVersion?.signed ? (
+                      <Badge tone="success">
+                        <ShieldCheck className="h-3 w-3" /> Signé
+                      </Badge>
+                    ) : (
+                      <Badge tone="neutral">—</Badge>
+                    )}
+                  </Td>
+                  <Td>
+                    <StatusBadge status={p.status} />
+                  </Td>
+                  <Td className="text-right">
+                    <div className="flex flex-wrap justify-end gap-1.5">
+                      {p.status === 'pending' ? (
+                        <>
+                          <Button size="sm" variant="secondary" loading={busy === p.id} onClick={() => void review(p, 'approve')}>
+                            Approuver et signer
+                          </Button>
+                          <Button size="sm" variant="danger" disabled={busy === p.id} onClick={() => void review(p, 'reject')}>
+                            Rejeter
+                          </Button>
+                        </>
+                      ) : null}
+                      {p.status === 'published' && p.unsignedVersions.length ? (
+                        <Button size="sm" variant="secondary" icon={ShieldCheck} loading={busy === p.id} onClick={() => void review(p, 'approve')}>
+                          Signer v{p.unsignedVersions.join(', v')}
+                        </Button>
+                      ) : null}
+                      {p.status === 'published' ? (
+                        <Button
+                          size="sm"
+                          loading={busy === p.id}
+                          onClick={() => void review(p, 'unpublish')}
+                        >
+                          Dépublier
+                        </Button>
+                      ) : null}
+                      {p.status !== 'published' ? (
+                        <Button
+                          size="sm"
+                          variant="danger"
+                          icon={Trash2}
+                          disabled={busy === p.id}
+                          onClick={async () => {
+                            if (!window.confirm(`Supprimer définitivement « ${p.name} » ?`)) return;
+                            setBusy(p.id);
+                            setMsg('');
+                            setFailure('');
+                            try {
+                              await sa(`/products/${p.id}`, { method: 'DELETE' });
+                              setMsg(`${p.name} supprimé.`);
+                              reload();
+                            } catch (e) {
+                              setFailure(e instanceof Error ? e.message : 'Suppression impossible');
+                            } finally {
+                              setBusy(null);
+                            }
+                          }}
+                        >
+                          Supprimer
+                        </Button>
+                      ) : null}
+                    </div>
+                  </Td>
+                </tr>
+              ))}
+            </tbody>
+          </Table>
+        ) : (
+          <EmptyState icon={Package} title="Aucun produit" description="Aucun module ni thème pour ce filtre." />
+        )}
+      </Card>
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ Auth */
+
+function Login({ onOk }: { onOk: () => void }) {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [err, setErr] = useState('');
+  const [loading, setLoading] = useState(false);
+  return (
+    <div className="grid min-h-screen bg-white lg:grid-cols-[1.1fr_1fr]">
+      <div className="relative hidden overflow-hidden bg-navy-950 p-12 text-white lg:flex lg:flex-col">
+        <div className="absolute -right-32 -top-32 h-[480px] w-[480px] rounded-full bg-brand-600/20 blur-3xl" />
+        <div className="absolute -bottom-40 -left-20 h-[420px] w-[420px] rounded-full bg-sky-500/10 blur-3xl" />
+        <div className="relative flex items-center gap-3">
+          <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-brand-600">
+            <SnapifyMark className="h-7 w-7" accent="#FFFFFF" />
+          </div>
+          <span className="text-lg font-semibold tracking-tight">Snapify</span>
+        </div>
+        <div className="relative mt-auto max-w-md">
+          <h1 className="text-3xl font-semibold leading-tight tracking-tight">Pilotez toute la plateforme Snapify depuis un seul espace.</h1>
+          <ul className="mt-10 space-y-5 text-sm text-slate-300">
+            {[
+              { icon: Inbox, t: 'Licences, commandes marketplace et payouts' },
+              { icon: Users, t: 'Utilisateurs, éditeurs et rôles plateforme' },
+              { icon: Package, t: 'Validation, signature et catalogue' },
+              { icon: Server, t: 'Santé système, Flouci et SEO landing' },
+            ].map(({ icon: Icon, t }) => (
+              <li key={t} className="flex items-center gap-3">
+                <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-white/5 ring-1 ring-white/10">
+                  <Icon className="h-4 w-4 text-brand-400" />
+                </span>
+                {t}
+              </li>
+            ))}
+          </ul>
+        </div>
+        <p className="relative mt-16 text-xs text-slate-500">© {new Date().getFullYear()} Snapify — Superadmin plateforme</p>
+      </div>
+      <div className="flex items-center justify-center px-6 py-12">
+        <div className="w-full max-w-sm">
+          <div className="mb-8 lg:hidden">
+            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-brand-600">
+              <SnapifyMark className="h-8 w-8" accent="#FFFFFF" />
+            </div>
+          </div>
+          <form
+            onSubmit={async (e) => {
+              e.preventDefault();
+              setErr('');
+              setLoading(true);
+              try {
+                await sa('/login', { method: 'POST', body: JSON.stringify({ username, password }) });
+                onOk();
+              } catch (ex) {
+                setErr(ex instanceof Error ? ex.message : 'Erreur');
+              } finally {
+                setLoading(false);
+              }
+            }}
+          >
+            <h2 className="text-2xl font-semibold tracking-tight text-slate-900">Superadmin</h2>
+            <p className="mt-1.5 text-sm text-slate-500">Accès réservé à l’administration de la plateforme.</p>
+            <div className="mt-8 space-y-5">
+              {err ? <Alert tone="danger">{err}</Alert> : null}
+              <Field label="Identifiant" htmlFor="sa-user">
+                <div className="relative">
+                  <User className="pointer-events-none absolute left-3 top-3 h-4 w-4 text-slate-400" />
+                  <Input id="sa-user" autoFocus value={username} onChange={(e) => setUsername(e.target.value)} autoComplete="username" className="h-10 pl-9" />
+                </div>
+              </Field>
+              <Field label="Mot de passe" htmlFor="sa-pass">
+                <div className="relative">
+                  <Lock className="pointer-events-none absolute left-3 top-3 h-4 w-4 text-slate-400" />
+                  <Input id="sa-pass" type="password" value={password} onChange={(e) => setPassword(e.target.value)} autoComplete="current-password" className="h-10 pl-9" />
+                </div>
+              </Field>
+              <Button type="submit" variant="primary" size="lg" loading={loading} className="w-full justify-center">
+                Se connecter
+              </Button>
+            </div>
+            <p className="mt-8 text-center text-xs text-slate-400">Accès réservé aux personnes autorisées. Les connexions sont journalisées.</p>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function App() {
+  const [auth, setAuth] = useState<boolean | null>(null);
+  const nav = useNavigate();
+  useEffect(() => {
+    void sa<{ ok: boolean }>('/me')
+      .then((d) => setAuth(d.ok))
+      .catch(() => setAuth(false));
+  }, []);
+
+  if (auth === null)
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-slate-50">
+        <RefreshCw className="h-5 w-5 animate-spin text-slate-400" />
+      </div>
+    );
+  if (!auth)
+    return (
+      <Login
+        onOk={() => {
+          setAuth(true);
+          nav('/');
+        }}
+      />
+    );
+
+  return (
+    <Shell
+      onLogout={async () => {
+        await sa('/logout', { method: 'POST', body: '{}' });
+        setAuth(false);
+      }}
+    >
+      <Routes>
+        <Route index element={<Overview />} />
+        <Route path="finances" element={<Finances />} />
+        <Route path="visites" element={<Visites />} />
+        <Route path="demandes" element={<Demandes />} />
+        <Route path="clients" element={<ClientsPage />} />
+        <Route path="commandes" element={<OrdersPage />} />
+        <Route path="factures" element={<InvoicesPage />} />
+        <Route path="paiements" element={<PaymentsPage />} />
+        <Route path="payouts" element={<PayoutsPage />} />
+        <Route path="catalogue" element={<Catalogue />} />
+        <Route path="editeurs" element={<PublishersPage />} />
+        <Route path="tickets" element={<TicketsPage />} />
+        <Route path="newsletter" element={<NewsletterPage />} />
+        <Route path="parametrage" element={<SettingsPage />} />
+        <Route path="utilisateurs" element={<UsersPage />} />
+        <Route path="systeme" element={<SystemPage />} />
+        <Route path="seo" element={<SeoControlPage />} />
+        <Route path="*" element={<Navigate to="/" replace />} />
+      </Routes>
+    </Shell>
+  );
+}