create-snapify-app 0.0.0-stage → 1.1.1

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

@@ -0,0 +1,692 @@
+/**
+ * Contrôle SEO total — meta TN/FR, technique, pages, campagne backlinks (100+)
+ */
+import React, { useEffect, useMemo, useState } from 'react';
+import { ExternalLink, FileCheck2, Link2, RefreshCw, X } from 'lucide-react';
+import {
+  Alert,
+  Badge,
+  Button,
+  Field,
+  Input,
+  PageHeader,
+  PageSkeleton,
+  Section,
+  Switch,
+  Tabs,
+  Textarea,
+} from '../../../../src/admin/ui/primitives';
+import { sa } from '../lib/api';
+
+type Seo = {
+  title: string;
+  description: string;
+  keywords: string[];
+  ogImage: string;
+  canonical: string;
+  robots: string;
+  jsonLdExtra: string;
+  tunisiaFocus: boolean;
+  cities: string[];
+  titleFr: string;
+  descriptionFr: string;
+  keywordsFr: string[];
+  citiesFr: string[];
+  franceFocus: boolean;
+  backlinkTargets: { name: string; url: string; note: string }[];
+  robotsTxtOverride: string;
+  robotsTxtExtra: string;
+  sitemapExtraUrls: { loc: string; priority?: string; market?: 'tn' | 'fr' | 'both' }[];
+  pageOverrides: {
+    path: string;
+    titleTn?: string;
+    titleFr?: string;
+    descTn?: string;
+    descFr?: string;
+    noindex?: boolean;
+  }[];
+  noindexPaths: string[];
+  googleSiteVerification: string;
+  bingSiteVerification: string;
+  ga4Id: string;
+  indexNowKey: string;
+  socialProfiles: string[];
+  enableJsonLd: boolean;
+  enableHreflang: boolean;
+  llmsTxtExtra: string;
+};
+
+type Lead = {
+  id: string;
+  name: string;
+  url: string;
+  market: 'tn' | 'fr' | 'intl';
+  category: string;
+  submitHint: string;
+  priority: number;
+};
+
+type Track = {
+  id: string;
+  status: 'todo' | 'in_progress' | 'submitted' | 'live' | 'rejected' | 'skipped';
+  liveUrl?: string;
+  note?: string;
+  updatedAt?: string;
+};
+
+const STATUS_LABEL: Record<Track['status'], string> = {
+  todo: 'À faire',
+  in_progress: 'En cours',
+  submitted: 'Soumis',
+  live: 'Live ✓',
+  rejected: 'Refusé',
+  skipped: 'Ignoré',
+};
+
+export function SeoControlPage() {
+  const [tab, setTab] = useState('meta');
+  const [seo, setSeo] = useState<Seo | null>(null);
+  const [kw, setKw] = useState('');
+  const [kwFr, setKwFr] = useState('');
+  const [social, setSocial] = useState('');
+  const [msg, setMsg] = useState<{ tone: 'success' | 'danger' | 'info'; text: string } | null>(null);
+  const [saving, setSaving] = useState(false);
+
+  const [catalog, setCatalog] = useState<Lead[]>([]);
+  const [tracks, setTracks] = useState<Track[]>([]);
+  const [stats, setStats] = useState<{ total: number } | null>(null);
+  const [filterMarket, setFilterMarket] = useState<'all' | 'tn' | 'fr' | 'intl'>('all');
+  const [filterStatus, setFilterStatus] = useState<'all' | Track['status']>('all');
+  const [q, setQ] = useState('');
+  const [blBusy, setBlBusy] = useState(false);
+  const [daily, setDaily] = useState<{
+    ranAt: string;
+    durationMs: number;
+    score: number;
+    actions: { id: string; ok: boolean; detail: string }[];
+    marketplace: Record<string, number>;
+    seo: Record<string, boolean | number>;
+    nextTips: string[];
+    health: { url: string; status: number | 'error' }[];
+  } | null>(null);
+  const [dailyBusy, setDailyBusy] = useState(false);
+
+  const loadSeo = async () => {
+    const d = await sa<Seo>('/seo');
+    setSeo(d);
+    setKw((d.keywords || []).join(', '));
+    setKwFr((d.keywordsFr || []).join(', '));
+    setSocial((d.socialProfiles || []).join('\n'));
+  };
+
+  const loadBacklinks = async () => {
+    const d = await sa<{ catalog: Lead[]; tracks: Track[]; stats: { total: number } }>('/seo/backlinks');
+    setCatalog(d.catalog || []);
+    setTracks(d.tracks || []);
+    setStats(d.stats);
+  };
+
+  const loadDaily = async () => {
+    const d = await sa<{ report: typeof daily }>('/seo/daily');
+    setDaily(d.report);
+  };
+
+  useEffect(() => {
+    void loadSeo().catch((e) => setMsg({ tone: 'danger', text: e instanceof Error ? e.message : 'Erreur SEO' }));
+    void loadBacklinks().catch(() => undefined);
+    void loadDaily().catch(() => undefined);
+  }, []);
+
+  const runDaily = async () => {
+    setDailyBusy(true);
+    try {
+      const d = await sa<{ report: NonNullable<typeof daily> }>('/seo/daily/run', { method: 'POST', body: '{}' });
+      setDaily(d.report);
+      setMsg({ tone: 'success', text: `Cron exécuté — score ${d.report.score}/100` });
+    } catch (e) {
+      setMsg({ tone: 'danger', text: e instanceof Error ? e.message : 'Cron échoué' });
+    } finally {
+      setDailyBusy(false);
+    }
+  };
+
+  const set = (patch: Partial<Seo>) => seo && setSeo({ ...seo, ...patch });
+
+  const save = async () => {
+    if (!seo) return;
+    setSaving(true);
+    setMsg(null);
+    try {
+      await sa('/seo', {
+        method: 'PUT',
+        body: JSON.stringify({
+          ...seo,
+          keywords: kw.split(',').map((s) => s.trim()).filter(Boolean),
+          keywordsFr: kwFr.split(',').map((s) => s.trim()).filter(Boolean),
+          socialProfiles: social
+            .split(/\n|,/)
+            .map((s) => s.trim())
+            .filter(Boolean),
+        }),
+      });
+      setMsg({ tone: 'success', text: 'SEO publié — appliqué immédiatement sur snapify.tn / .fr.' });
+      await loadSeo();
+    } catch (e) {
+      setMsg({ tone: 'danger', text: e instanceof Error ? e.message : 'Erreur' });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const trackMap = useMemo(() => new Map(tracks.map((t) => [t.id, t])), [tracks]);
+
+  const rows = useMemo(() => {
+    return catalog
+      .filter((l) => (filterMarket === 'all' ? true : l.market === filterMarket))
+      .filter((l) => {
+        const st = trackMap.get(l.id)?.status || 'todo';
+        return filterStatus === 'all' ? true : st === filterStatus;
+      })
+      .filter((l) => {
+        if (!q.trim()) return true;
+        const hay = `${l.name} ${l.url} ${l.category} ${l.submitHint}`.toLowerCase();
+        return hay.includes(q.trim().toLowerCase());
+      })
+      .sort((a, b) => a.priority - b.priority || a.name.localeCompare(b.name));
+  }, [catalog, filterMarket, filterStatus, q, trackMap]);
+
+  const liveCount = tracks.filter((t) => t.status === 'live').length;
+  const submittedCount = tracks.filter((t) => t.status === 'submitted' || t.status === 'live').length;
+
+  const patchTrack = (id: string, patch: Partial<Track>) => {
+    setTracks((prev) => {
+      const exists = prev.find((t) => t.id === id);
+      if (exists) return prev.map((t) => (t.id === id ? { ...t, ...patch, updatedAt: new Date().toISOString() } : t));
+      return [...prev, { id, status: 'todo', ...patch, updatedAt: new Date().toISOString() }];
+    });
+  };
+
+  const saveTracks = async () => {
+    setBlBusy(true);
+    try {
+      await sa('/seo/backlinks', { method: 'PUT', body: JSON.stringify({ tracks }) });
+      setMsg({ tone: 'success', text: `Campagne backlinks enregistrée (${tracks.length} suivis).` });
+    } catch (e) {
+      setMsg({ tone: 'danger', text: e instanceof Error ? e.message : 'Erreur' });
+    } finally {
+      setBlBusy(false);
+    }
+  };
+
+  const seedCatalog = async () => {
+    setBlBusy(true);
+    try {
+      await sa('/seo/backlinks/seed', { method: 'POST', body: '{}' });
+      await loadBacklinks();
+      setMsg({
+        tone: 'info',
+        text: `${stats?.total || catalog.length} cibles chargées. Soumettez-les une par une (pas de spam auto — Google pénalise).`,
+      });
+    } catch (e) {
+      setMsg({ tone: 'danger', text: e instanceof Error ? e.message : 'Erreur' });
+    } finally {
+      setBlBusy(false);
+    }
+  };
+
+  const exportCsv = () => {
+    const lines = [
+      'id,name,market,category,priority,status,url,submitHint,liveUrl,note',
+      ...rows.map((l) => {
+        const t = trackMap.get(l.id);
+        const cells = [
+          l.id,
+          l.name,
+          l.market,
+          l.category,
+          l.priority,
+          t?.status || 'todo',
+          l.url,
+          l.submitHint,
+          t?.liveUrl || '',
+          t?.note || '',
+        ].map((c) => `"${String(c).replace(/"/g, '""')}"`);
+        return cells.join(',');
+      }),
+    ];
+    const blob = new Blob([lines.join('\n')], { type: 'text/csv;charset=utf-8' });
+    const a = document.createElement('a');
+    a.href = URL.createObjectURL(blob);
+    a.download = `snapify-backlinks-${new Date().toISOString().slice(0, 10)}.csv`;
+    a.click();
+  };
+
+  const pingIndexNow = async () => {
+    setSaving(true);
+    try {
+      const urls = [
+        'https://snapify.tn/',
+        'https://snapify.fr/',
+        'https://snapify.tn/seo-tunisie',
+        'https://snapify.fr/seo-france',
+        'https://snapify.fr/alternative-wordpress',
+      ];
+      const r = await sa<{ ok: boolean; status: number }>('/seo/indexnow', {
+        method: 'POST',
+        body: JSON.stringify({ urls }),
+      });
+      setMsg({
+        tone: r.ok ? 'success' : 'danger',
+        text: r.ok ? `IndexNow OK (${r.status})` : `IndexNow HTTP ${r.status}`,
+      });
+    } catch (e) {
+      setMsg({ tone: 'danger', text: e instanceof Error ? e.message : 'IndexNow échoué' });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (!seo) return <PageSkeleton />;
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title="Contrôle SEO"
+        description="Meta TN/FR, robots, sitemap, vérifications, pages, campagne backlinks (100+ cibles légitimes)."
+        actions={
+          <>
+            <a href="https://snapify.tn/sitemap_index.xml" target="_blank" rel="noreferrer">
+              <Button icon={ExternalLink}>Sitemap index</Button>
+            </a>
+            <Button variant="primary" loading={saving} onClick={() => void save()}>
+              Publier SEO
+            </Button>
+          </>
+        }
+      />
+      {msg ? <Alert tone={msg.tone}>{msg.text}</Alert> : null}
+
+      <Alert tone="info" title="Backlinks : qualité > quantité">
+        Les moteurs pénalisent les fermes de liens et le spam. Ici : <strong>{stats?.total || catalog.length} cibles
+        réelles</strong> (annuaires, médias, Product Hunt, G2…) à soumettre / pitcher. Objectif : des dizaines de liens{' '}
+        <em>live</em> utiles, pas 500 faux domaines.
+      </Alert>
+
+      <Tabs
+        value={tab}
+        onChange={setTab}
+        tabs={[
+          { value: 'meta', label: 'Meta TN / FR' },
+          { value: 'tech', label: 'Technique' },
+          { value: 'pages', label: 'Pages' },
+          { value: 'backlinks', label: `Backlinks (${liveCount} live)` },
+          { value: 'cron', label: `Cron ${daily ? `${daily.score}/100` : ''}` },
+        ]}
+      />
+
+      {tab === 'meta' && (
+        <div className="grid gap-4 lg:grid-cols-3">
+          <div className="space-y-4 lg:col-span-2">
+            <Section title="Tunisie — snapify.tn">
+              <Field label="Title TN" counter={{ value: seo.title.length, min: 30, max: 65 }}>
+                <Input value={seo.title} onChange={(e) => set({ title: e.target.value })} />
+              </Field>
+              <Field label="Meta description TN" counter={{ value: seo.description.length, min: 80, max: 160 }}>
+                <Textarea rows={3} value={seo.description} onChange={(e) => set({ description: e.target.value })} />
+              </Field>
+              <Field label="Mots-clés TN">
+                <Textarea rows={3} value={kw} onChange={(e) => setKw(e.target.value)} />
+              </Field>
+              <Field label="Villes TN">
+                <Input value={seo.cities.join(', ')} onChange={(e) => set({ cities: e.target.value.split(',').map((s) => s.trim()).filter(Boolean) })} />
+              </Field>
+              <Switch checked={seo.tunisiaFocus} onChange={(v) => set({ tunisiaFocus: v })} label="Ciblage Tunisie" />
+            </Section>
+            <Section title="France — snapify.fr">
+              <Field label="Title FR" counter={{ value: (seo.titleFr || '').length, min: 30, max: 70 }}>
+                <Input value={seo.titleFr || ''} onChange={(e) => set({ titleFr: e.target.value })} />
+              </Field>
+              <Field label="Meta description FR" counter={{ value: (seo.descriptionFr || '').length, min: 80, max: 165 }}>
+                <Textarea rows={3} value={seo.descriptionFr || ''} onChange={(e) => set({ descriptionFr: e.target.value })} />
+              </Field>
+              <Field label="Mots-clés FR">
+                <Textarea rows={3} value={kwFr} onChange={(e) => setKwFr(e.target.value)} />
+              </Field>
+              <Field label="Villes FR">
+                <Input value={(seo.citiesFr || []).join(', ')} onChange={(e) => set({ citiesFr: e.target.value.split(',').map((s) => s.trim()).filter(Boolean) })} />
+              </Field>
+              <Switch checked={seo.franceFocus !== false} onChange={(v) => set({ franceFocus: v })} label="Ciblage France" />
+            </Section>
+          </div>
+          <div className="space-y-4">
+            <Section title="Aperçu Google TN">
+              <div className="rounded-lg border border-slate-200 p-3">
+                <p className="truncate text-xs text-slate-500">{seo.canonical}</p>
+                <p className="mt-0.5 text-[17px] leading-snug text-[#1a0dab]">{seo.title}</p>
+                <p className="mt-1 text-[13px] text-slate-600">{seo.description}</p>
+              </div>
+            </Section>
+            <Section title="Aperçu Google FR">
+              <div className="rounded-lg border border-slate-200 p-3">
+                <p className="truncate text-xs text-slate-500">https://snapify.fr/</p>
+                <p className="mt-0.5 text-[17px] leading-snug text-[#1a0dab]">{seo.titleFr}</p>
+                <p className="mt-1 text-[13px] text-slate-600">{seo.descriptionFr}</p>
+              </div>
+            </Section>
+          </div>
+        </div>
+      )}
+
+      {tab === 'tech' && (
+        <div className="space-y-4">
+          <Section title="Balises & bascules">
+            <div className="grid gap-4 sm:grid-cols-2">
+              <Field label="Canonical de base (TN)">
+                <Input value={seo.canonical} onChange={(e) => set({ canonical: e.target.value })} />
+              </Field>
+              <Field label="Meta robots (défaut)">
+                <Input value={seo.robots} onChange={(e) => set({ robots: e.target.value })} className="font-mono" />
+              </Field>
+              <Field label="Image OG">
+                <Input value={seo.ogImage} onChange={(e) => set({ ogImage: e.target.value })} />
+              </Field>
+              <Field label="Google Search Console (content=)">
+                <Input value={seo.googleSiteVerification || ''} onChange={(e) => set({ googleSiteVerification: e.target.value })} placeholder="code vérification" className="font-mono" />
+              </Field>
+              <Field label="Bing Webmaster (msvalidate.01)">
+                <Input value={seo.bingSiteVerification || ''} onChange={(e) => set({ bingSiteVerification: e.target.value })} className="font-mono" />
+              </Field>
+              <Field label="GA4 Measurement ID">
+                <Input value={seo.ga4Id || ''} onChange={(e) => set({ ga4Id: e.target.value })} placeholder="G-XXXXXXXX" className="font-mono" />
+              </Field>
+              <Field label="IndexNow key" hint="Fichier servi sur https://domaine/{key}.txt">
+                <Input value={seo.indexNowKey || ''} onChange={(e) => set({ indexNowKey: e.target.value })} className="font-mono" />
+              </Field>
+            </div>
+            <div className="flex flex-wrap gap-4">
+              <Switch checked={seo.enableJsonLd !== false} onChange={(v) => set({ enableJsonLd: v })} label="JSON-LD" />
+              <Switch checked={seo.enableHreflang !== false} onChange={(v) => set({ enableHreflang: v })} label="hreflang" />
+            </div>
+            <Button size="sm" loading={saving} onClick={() => void pingIndexNow()}>
+              Ping IndexNow (URLs clés)
+            </Button>
+          </Section>
+          <Section title="robots.txt">
+            <Field label="Extra (ajouté au robots généré)">
+              <Textarea rows={4} value={seo.robotsTxtExtra || ''} onChange={(e) => set({ robotsTxtExtra: e.target.value })} className="font-mono text-xs" />
+            </Field>
+            <Field label="Override complet" hint="Si rempli, remplace tout le robots.txt.">
+              <Textarea rows={8} value={seo.robotsTxtOverride || ''} onChange={(e) => set({ robotsTxtOverride: e.target.value })} className="font-mono text-xs" placeholder="User-agent: *&#10;Allow: /&#10;..." />
+            </Field>
+            <Field label="Chemins noindex (un par ligne)">
+              <Textarea
+                rows={3}
+                value={(seo.noindexPaths || []).join('\n')}
+                onChange={(e) => set({ noindexPaths: e.target.value.split(/\n/).map((s) => s.trim()).filter(Boolean) })}
+                className="font-mono text-xs"
+              />
+            </Field>
+          </Section>
+          <Section title="Sitemap — URLs supplémentaires">
+            <Field label="Une URL par ligne (chemin /page ou https://…)|priorité|marché" hint="Ex: /blog|0.6|both">
+              <Textarea
+                rows={5}
+                value={(seo.sitemapExtraUrls || []).map((u) => `${u.loc}|${u.priority || '0.5'}|${u.market || 'both'}`).join('\n')}
+                onChange={(e) =>
+                  set({
+                    sitemapExtraUrls: e.target.value
+                      .split(/\n/)
+                      .map((line) => line.trim())
+                      .filter(Boolean)
+                      .map((line) => {
+                        const [loc, priority, market] = line.split('|').map((s) => s.trim());
+                        return {
+                          loc: loc || '',
+                          priority: priority || '0.5',
+                          market: (market === 'tn' || market === 'fr' || market === 'both' ? market : 'both') as 'tn' | 'fr' | 'both',
+                        };
+                      }),
+                  })
+                }
+                className="font-mono text-xs"
+              />
+            </Field>
+          </Section>
+          <Section title="Profils sameAs / sociaux">
+            <Field label="Une URL par ligne (LinkedIn, GitHub, NOVALABS…)">
+              <Textarea rows={4} value={social} onChange={(e) => setSocial(e.target.value)} className="font-mono text-xs" />
+            </Field>
+            <Field label="JSON-LD supplémentaire">
+              <Textarea rows={4} value={seo.jsonLdExtra || ''} onChange={(e) => set({ jsonLdExtra: e.target.value })} className="font-mono text-xs" />
+            </Field>
+            <Field label="llms.txt — texte additionnel">
+              <Textarea rows={4} value={seo.llmsTxtExtra || ''} onChange={(e) => set({ llmsTxtExtra: e.target.value })} />
+            </Field>
+          </Section>
+          <Section title="Liens sameAs historiques">
+            {(seo.backlinkTargets || []).map((b, i) => (
+              <div key={i} className="flex gap-2">
+                <Input value={b.name} className="sm:w-40" onChange={(e) => set({ backlinkTargets: seo.backlinkTargets.map((x, j) => (j === i ? { ...x, name: e.target.value } : x)) })} />
+                <Input value={b.url} onChange={(e) => set({ backlinkTargets: seo.backlinkTargets.map((x, j) => (j === i ? { ...x, url: e.target.value } : x)) })} />
+                <Button variant="ghost" size="icon" onClick={() => set({ backlinkTargets: seo.backlinkTargets.filter((_, j) => j !== i) })}>
+                  <X className="h-4 w-4" />
+                </Button>
+              </div>
+            ))}
+            <Button size="sm" onClick={() => set({ backlinkTargets: [...(seo.backlinkTargets || []), { name: '', url: '', note: '' }] })}>
+              Ajouter
+            </Button>
+          </Section>
+        </div>
+      )}
+
+      {tab === 'pages' && (
+        <Section
+          title="Overrides par page"
+          description="Title / description sur mesure pour chaque chemin (prioritaire sur les défauts)."
+          actions={
+            <Button
+              size="sm"
+              onClick={() =>
+                set({
+                  pageOverrides: [
+                    ...(seo.pageOverrides || []),
+                    { path: '/nouvelle-page', titleTn: '', titleFr: '', descTn: '', descFr: '', noindex: false },
+                  ],
+                })
+              }
+            >
+              Ajouter une page
+            </Button>
+          }
+        >
+          {(seo.pageOverrides || []).length === 0 ? (
+            <p className="text-sm text-slate-500">Aucun override — les pages hub utilisent les titres intégrés.</p>
+          ) : (
+            <div className="space-y-4">
+              {seo.pageOverrides.map((p, i) => (
+                <div key={i} className="rounded-xl border border-slate-200 p-4 space-y-2">
+                  <div className="flex flex-wrap gap-2">
+                    <Input
+                      className="font-mono sm:w-48"
+                      value={p.path}
+                      onChange={(e) =>
+                        set({ pageOverrides: seo.pageOverrides.map((x, j) => (j === i ? { ...x, path: e.target.value } : x)) })
+                      }
+                    />
+                    <Switch
+                      checked={!!p.noindex}
+                      onChange={(v) => set({ pageOverrides: seo.pageOverrides.map((x, j) => (j === i ? { ...x, noindex: v } : x)) })}
+                      label="noindex"
+                    />
+                    <Button variant="ghost" size="sm" onClick={() => set({ pageOverrides: seo.pageOverrides.filter((_, j) => j !== i) })}>
+                      Retirer
+                    </Button>
+                  </div>
+                  <Input placeholder="Title TN" value={p.titleTn || ''} onChange={(e) => set({ pageOverrides: seo.pageOverrides.map((x, j) => (j === i ? { ...x, titleTn: e.target.value } : x)) })} />
+                  <Input placeholder="Title FR" value={p.titleFr || ''} onChange={(e) => set({ pageOverrides: seo.pageOverrides.map((x, j) => (j === i ? { ...x, titleFr: e.target.value } : x)) })} />
+                  <Textarea rows={2} placeholder="Description TN" value={p.descTn || ''} onChange={(e) => set({ pageOverrides: seo.pageOverrides.map((x, j) => (j === i ? { ...x, descTn: e.target.value } : x)) })} />
+                  <Textarea rows={2} placeholder="Description FR" value={p.descFr || ''} onChange={(e) => set({ pageOverrides: seo.pageOverrides.map((x, j) => (j === i ? { ...x, descFr: e.target.value } : x)) })} />
+                </div>
+              ))}
+            </div>
+          )}
+          <ul className="mt-4 space-y-1 text-sm text-slate-600">
+            {['/', '/commander', '/seo-tunisie', '/seo-france', '/alternative-wordpress', '/presse'].map((p) => (
+              <li key={p} className="flex gap-2">
+                <FileCheck2 className="mt-0.5 h-4 w-4 text-brand-600" />
+                <code>{p}</code>
+              </li>
+            ))}
+          </ul>
+        </Section>
+      )}
+
+      {tab === 'cron' && (
+        <div className="space-y-4">
+          <Section
+            title="Amélioration quotidienne"
+            description="Tourne chaque jour vers 03:05 — SEO, IndexNow, santé URLs, catalogue marketplace & file d’attente devs."
+            actions={
+              <Button size="sm" variant="primary" loading={dailyBusy} onClick={() => void runDaily()}>
+                Lancer maintenant
+              </Button>
+            }
+          >
+            {daily ? (
+              <div className="space-y-3 text-sm">
+                <p>
+                  Dernier run : <strong>{new Date(daily.ranAt).toLocaleString('fr-FR')}</strong> · {daily.durationMs} ms · score{' '}
+                  <Badge tone={daily.score >= 70 ? 'success' : daily.score >= 40 ? 'warning' : 'danger'}>{daily.score}/100</Badge>
+                </p>
+                <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
+                  <div className="rounded-lg border border-slate-200 p-3">
+                    <div className="text-xs text-slate-500">Produits publiés</div>
+                    <div className="text-lg font-semibold">{daily.marketplace.published}</div>
+                  </div>
+                  <div className="rounded-lg border border-slate-200 p-3">
+                    <div className="text-xs text-slate-500">En revue (devs)</div>
+                    <div className="text-lg font-semibold">{daily.marketplace.pendingReview}</div>
+                  </div>
+                  <div className="rounded-lg border border-slate-200 p-3">
+                    <div className="text-xs text-slate-500">Catalogue modules</div>
+                    <div className="text-lg font-semibold">{daily.marketplace.catalogModules}</div>
+                  </div>
+                  <div className="rounded-lg border border-slate-200 p-3">
+                    <div className="text-xs text-slate-500">Backlinks live</div>
+                    <div className="text-lg font-semibold">{daily.seo.backlinksLive as number}</div>
+                  </div>
+                </div>
+                <ul className="space-y-1">
+                  {daily.actions.map((a) => (
+                    <li key={a.id} className="flex gap-2">
+                      <Badge tone={a.ok ? 'success' : 'warning'}>{a.ok ? 'OK' : '!'}</Badge>
+                      <span className="text-slate-700">{a.detail}</span>
+                    </li>
+                  ))}
+                </ul>
+                {daily.nextTips?.length ? (
+                  <div>
+                    <p className="font-semibold text-slate-800">Prochaines actions</p>
+                    <ul className="mt-1 list-disc pl-5 text-slate-600">
+                      {daily.nextTips.map((t) => (
+                        <li key={t}>{t}</li>
+                      ))}
+                    </ul>
+                  </div>
+                ) : null}
+              </div>
+            ) : (
+              <p className="text-sm text-slate-500">Aucun rapport encore — lancez le cron une première fois.</p>
+            )}
+          </Section>
+        </div>
+      )}
+
+      {tab === 'backlinks' && (
+        <div className="space-y-4">
+          <Section
+            title="Campagne backlinks"
+            description={`${catalog.length} cibles · ${submittedCount} soumises · ${liveCount} live`}
+            actions={
+              <>
+                <Button size="sm" variant="ghost" icon={RefreshCw} loading={blBusy} onClick={() => void seedCatalog()}>
+                  Charger catalogue
+                </Button>
+                <Button size="sm" variant="ghost" onClick={exportCsv}>
+                  Export CSV
+                </Button>
+                <Button size="sm" variant="primary" loading={blBusy} onClick={() => void saveTracks()}>
+                  Enregistrer suivi
+                </Button>
+              </>
+            }
+          >
+            <div className="flex flex-wrap gap-2">
+              <Input className="max-w-xs" placeholder="Rechercher…" value={q} onChange={(e) => setQ(e.target.value)} />
+              <select className="rounded-lg border border-slate-200 px-3 py-2 text-sm" value={filterMarket} onChange={(e) => setFilterMarket(e.target.value as typeof filterMarket)}>
+                <option value="all">Tous marchés</option>
+                <option value="tn">Tunisie</option>
+                <option value="fr">France</option>
+                <option value="intl">International</option>
+              </select>
+              <select className="rounded-lg border border-slate-200 px-3 py-2 text-sm" value={filterStatus} onChange={(e) => setFilterStatus(e.target.value as typeof filterStatus)}>
+                <option value="all">Tous statuts</option>
+                {(Object.keys(STATUS_LABEL) as Track['status'][]).map((s) => (
+                  <option key={s} value={s}>
+                    {STATUS_LABEL[s]}
+                  </option>
+                ))}
+              </select>
+              <Badge tone="info">{rows.length} affichées</Badge>
+            </div>
+          </Section>
+
+          <div className="space-y-2">
+            {rows.map((l) => {
+              const t = trackMap.get(l.id) || { id: l.id, status: 'todo' as const };
+              return (
+                <div key={l.id} className="rounded-xl border border-slate-200 bg-white p-3 sm:p-4">
+                  <div className="flex flex-wrap items-start justify-between gap-2">
+                    <div className="min-w-0 flex-1">
+                      <div className="flex flex-wrap items-center gap-2">
+                        <strong className="text-slate-900">{l.name}</strong>
+                        <Badge tone={l.market === 'tn' ? 'success' : l.market === 'fr' ? 'info' : 'neutral'}>{l.market}</Badge>
+                        <Badge tone="neutral">{l.category}</Badge>
+                        <Badge tone={l.priority === 1 ? 'warning' : 'neutral'}>P{l.priority}</Badge>
+                      </div>
+                      <p className="mt-1 text-xs text-slate-500">{l.submitHint}</p>
+                      <a href={l.url} target="_blank" rel="noreferrer" className="mt-1 inline-flex items-center gap-1 text-xs font-medium text-brand-700">
+                        <Link2 className="h-3.5 w-3.5" />
+                        {l.url}
+                      </a>
+                    </div>
+                    <select
+                      className="rounded-lg border border-slate-200 px-2 py-1.5 text-sm"
+                      value={t.status}
+                      onChange={(e) => patchTrack(l.id, { status: e.target.value as Track['status'] })}
+                    >
+                      {(Object.keys(STATUS_LABEL) as Track['status'][]).map((s) => (
+                        <option key={s} value={s}>
+                          {STATUS_LABEL[s]}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+                  <div className="mt-2 grid gap-2 sm:grid-cols-2">
+                    <Input
+                      placeholder="URL du backlink live (si obtenu)"
+                      value={t.liveUrl || ''}
+                      onChange={(e) => patchTrack(l.id, { liveUrl: e.target.value })}
+                    />
+                    <Input placeholder="Note" value={t.note || ''} onChange={(e) => patchTrack(l.id, { note: e.target.value })} />
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}