create-snapify-app 0.0.0-stage → 1.1.1

package/template/src/admin/pages/PageEditorPage.tsx

@@ -0,0 +1,322 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Link, useParams } from 'react-router-dom';
+import { ArrowLeft, ExternalLink, History, Layers, Lock, Search, Settings2 } from 'lucide-react';
+import type { CmsPage } from '../../../server/cms/types';
+import type { ProjectMeta } from '../../../server/cms/blocks';
+import { api, type PageWithScore } from '../lib/api';
+import { useAsync, useEditable } from '../lib/hooks';
+import { fmtDateTime } from '../lib/format';
+import { useAuth } from '../context/AuthContext';
+import { publicUrl, useSite } from '../context/SiteContext';
+import { Alert, Button, cx, ErrorState, Field, Input, Kbd, ScoreDot, Select, Spinner, StatusBadge } from '../ui/primitives';
+import { Modal } from '../ui/overlays';
+import { SaveBar } from '../ui/SaveBar';
+import { SeoPanel } from '../editor/SeoPanel';
+import { fromLocalInput, RevisionsDrawer, toLocalInput } from '../editor/EditorBits';
+import { BlocksPanel } from '../editor/BlocksPanel';
+import { FieldsForm } from '../editor/fields';
+import { PROJECT_FIELDS } from '../editor/blockSchemas';
+import { DeviceSwitch, PreviewFrame, type Device } from '../editor/PreviewFrame';
+
+const EMPTY_PROJECT: ProjectMeta = { client: '', location: '', sector: 'Industrie', solution: '', summary: '', image: '', results: [] };
+
+function PageSettings({
+  page,
+  set,
+  readOnly,
+  seoOnly,
+  canPublish,
+  onRevisions,
+}: {
+  page: PageWithScore;
+  set: (p: Partial<CmsPage>) => void;
+  readOnly: boolean;
+  seoOnly: boolean;
+  canPublish: boolean;
+  onRevisions: () => void;
+}) {
+  return (
+    <div className="space-y-5 p-4">
+      {seoOnly ? (
+        <Alert tone="info" title="Référencement seul">
+          Les champs de page sont verrouillés. Utilisez le bouton SEO pour modifier le référencement.
+        </Alert>
+      ) : null}
+      <Field label="Titre de la page" hint="Utilisé dans l’administration, le fil d’Ariane et par défaut pour le référencement.">
+        <Input value={page.title} disabled={readOnly} onChange={(e) => set({ title: e.target.value })} />
+      </Field>
+      <div className="grid grid-cols-2 gap-3">
+        <Field label="Statut">
+          <Select
+            value={page.status}
+            disabled={readOnly || !canPublish}
+            onChange={(v) => set({ status: v as CmsPage['status'] })}
+            options={[
+              { value: 'draft', label: 'Brouillon' },
+              { value: 'published', label: 'Publiée' },
+              { value: 'scheduled', label: 'Planifiée' },
+            ]}
+          />
+        </Field>
+        <Field label="Modèle">
+          <Select
+            value={page.template}
+            disabled={readOnly}
+            onChange={(v) => set({ template: v as CmsPage['template'], ...(v === 'project' && !page.project ? { project: EMPTY_PROJECT } : {}) })}
+            options={[
+              { value: 'default', label: 'Standard' },
+              { value: 'landing', label: 'Atterrissage' },
+              { value: 'project', label: 'Réalisation' },
+              { value: 'legal', label: 'Page légale' },
+            ]}
+          />
+        </Field>
+      </div>
+      {page.status === 'scheduled' ? (
+        <Field label="Date de publication">
+          <Input type="datetime-local" disabled={readOnly || !canPublish} value={toLocalInput(page.scheduledAt)} onChange={(e) => set({ scheduledAt: fromLocalInput(e.target.value) })} />
+        </Field>
+      ) : null}
+      <Field
+        label="Adresse"
+        hint={page.path === '/' ? 'L’adresse de la page d’accueil ne peut pas être modifiée.' : 'Si la page est déjà indexée, ajoutez une redirection depuis l’ancienne adresse (SEO › Redirections).'}
+      >
+        <Input value={page.path} disabled={page.path === '/' || readOnly} onChange={(e) => set({ path: e.target.value })} />
+      </Field>
+
+      {page.template === 'project' ? (
+        <div className="rounded-xl border border-slate-200 bg-slate-50/60 p-4">
+          <p className="mb-1 text-sm font-semibold text-slate-900">Fiche réalisation</p>
+          <p className="mb-4 text-xs text-slate-500">Ces informations alimentent les blocs « Réalisations » (accueil, secteurs, liste des réalisations).</p>
+          <div className={readOnly ? 'pointer-events-none opacity-70' : ''}>
+            <FieldsForm
+              fields={PROJECT_FIELDS}
+              value={(page.project ?? EMPTY_PROJECT) as unknown as Record<string, unknown>}
+              onChange={(p) => set({ project: { ...(page.project ?? EMPTY_PROJECT), ...(p as Partial<ProjectMeta>) } })}
+            />
+          </div>
+        </div>
+      ) : null}
+
+      <dl className="space-y-2 rounded-xl border border-slate-200 p-4 text-[13px]">
+        <div className="flex justify-between">
+          <dt className="text-slate-500">Publiée le</dt>
+          <dd className="text-slate-800">{fmtDateTime(page.publishedAt)}</dd>
+        </div>
+        <div className="flex justify-between">
+          <dt className="text-slate-500">Dernière modification</dt>
+          <dd className="text-slate-800">{fmtDateTime(page.updatedAt)}</dd>
+        </div>
+        <div className="flex justify-between">
+          <dt className="text-slate-500">Score SEO enregistré</dt>
+          <dd>
+            <ScoreDot score={page.seoScore} />
+          </dd>
+        </div>
+      </dl>
+      <Button className="w-full justify-center" icon={History} onClick={onRevisions}>
+        Historique des versions
+      </Button>
+    </div>
+  );
+}
+
+export default function PageEditorPage() {
+  const { id = '' } = useParams();
+  const { can } = useAuth();
+  const { site, reload: reloadSite } = useSite();
+  const { data, error, loading, reload } = useAsync(async () => {
+    const page = (await api.pages()).find((p) => p.id === id);
+    if (!page) throw new Error('Cette page n’existe pas ou a été supprimée.');
+    return page;
+  }, [id]);
+
+  const save = useCallback(
+    async (p: PageWithScore) => {
+      const slug = p.path.split('/').filter(Boolean).pop() || '';
+      // Ne forcer « cms » que si les blocs ont changé (évite de convertir un gabarit react à un save SEO/meta).
+      const blocksChanged = data ? JSON.stringify(p.blocks) !== JSON.stringify(data.blocks) : true;
+      const contentSource = data?.contentSource === 'react' && !blocksChanged ? 'react' : 'cms';
+      const saved = await api.updatePage(p.id, { ...p, contentSource, seo: { ...p.seo, slug } });
+      void reloadSite();
+      return saved;
+    },
+    [reloadSite, data]
+  );
+  const ed = useEditable<PageWithScore>(data, save, { successMessage: 'Page enregistrée' });
+  const [revOpen, setRevOpen] = useState(false);
+  const [seoOpen, setSeoOpen] = useState(false);
+  const [tab, setTab] = useState<'blocks' | 'page'>('blocks');
+  const [device, setDevice] = useState<Device>('desktop');
+  const [selected, setSelected] = useState<string | null>(null);
+  const [scroll, setScroll] = useState<{ id: string | null; n: number }>({ id: null, n: 0 });
+
+  useEffect(() => {
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, []);
+
+  const page = ed.value;
+  const payload = useMemo(() => {
+    if (!page || !data) return { page: null, selectedBlockId: selected, scrollToBlockId: scroll.id, scrollNonce: scroll.n };
+    const blocksChanged = JSON.stringify(page.blocks) !== JSON.stringify(data.blocks);
+    const contentSource = data.contentSource === 'react' && !blocksChanged ? ('react' as const) : ('cms' as const);
+    return { page: { ...page, contentSource }, selectedBlockId: selected, scrollToBlockId: scroll.id, scrollNonce: scroll.n };
+  }, [page, data, selected, scroll]);
+  const select = useCallback((blockId: string | null, doScroll = false) => {
+    setSelected(blockId);
+    if (blockId && doScroll) setScroll((s) => ({ id: blockId, n: s.n + 1 }));
+  }, []);
+
+  if (error) {
+    return (
+      <div className="pt-10">
+        <ErrorState message={error} onRetry={reload} />
+      </div>
+    );
+  }
+  if (loading || !page || !data) {
+    return (
+      <div className="fixed inset-0 z-40 flex items-center justify-center bg-slate-50">
+        <Spinner className="h-6 w-6" />
+      </div>
+    );
+  }
+  const canPublish = can('pages.publish');
+  // Sans droit de publication, une page en ligne ou planifiée n'est plus modifiable (sauf son référencement).
+  const readOnly = !can('pages.edit') || (!canPublish && data.status !== 'draft');
+  const seoOnly = readOnly && can('seo.edit');
+  const set = (p: Partial<CmsPage>) => ed.patch(p as Partial<PageWithScore>);
+  const saveLabel = page.status === 'published' ? 'Mettre à jour' : page.status === 'scheduled' ? 'Planifier' : 'Enregistrer le brouillon';
+
+  return (
+    <div className="fixed inset-0 z-40 flex flex-col bg-slate-100">
+      <header className="flex h-14 shrink-0 items-center gap-3 border-b border-slate-200 bg-white px-3">
+        <Link to="/pages" className="flex h-9 w-9 items-center justify-center rounded-lg text-slate-500 transition hover:bg-slate-100 hover:text-slate-900" title="Toutes les pages">
+          <ArrowLeft className="h-4 w-4" />
+        </Link>
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <h1 className="truncate text-sm font-semibold text-slate-900">{page.title || 'Sans titre'}</h1>
+            <StatusBadge status={page.status} />
+          </div>
+          <p className="truncate text-xs text-slate-500">{page.path}</p>
+        </div>
+        <div className="mx-auto hidden md:block">
+          <DeviceSwitch value={device} onChange={setDevice} />
+        </div>
+        <div className="ml-auto flex items-center gap-2 md:ml-0">
+          {ed.dirty ? (
+            <span className="hidden items-center gap-1.5 text-xs text-amber-700 lg:flex">
+              <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-amber-500" />
+              Non enregistré · <Kbd>Ctrl S</Kbd>
+            </span>
+          ) : null}
+          {ed.dirty ? (
+            <Button size="sm" variant="ghost" onClick={ed.reset} disabled={ed.saving}>
+              Annuler
+            </Button>
+          ) : null}
+          <Button size="sm" icon={Search} onClick={() => setSeoOpen(true)}>
+            SEO
+          </Button>
+          {page.status === 'published' ? (
+            <a href={publicUrl(site, page.path)} target="_blank" rel="noreferrer" title="Voir la page publiée">
+              <Button size="sm" icon={ExternalLink} className="hidden sm:inline-flex">
+                Voir
+              </Button>
+            </a>
+          ) : null}
+          <Button size="sm" variant="secondary" loading={ed.saving} disabled={!ed.dirty} onClick={() => void ed.commit()}>
+            {saveLabel}
+          </Button>
+        </div>
+      </header>
+
+      <div className="flex min-h-0 flex-1">
+        <aside className="flex w-full max-w-[400px] shrink-0 flex-col border-r border-slate-200 bg-white">
+          <div className="grid shrink-0 grid-cols-2 gap-1 border-b border-slate-200 p-1.5">
+            {(
+              [
+                ['blocks', 'Blocs', Layers],
+                ['page', 'Page', Settings2],
+              ] as const
+            ).map(([k, label, I]) => (
+              <button
+                key={k}
+                type="button"
+                onClick={() => setTab(k)}
+                className={cx('flex items-center justify-center gap-1.5 rounded-md py-1.5 text-[13px] font-medium transition', tab === k ? 'bg-slate-100 text-slate-900' : 'text-slate-500 hover:text-slate-800')}
+              >
+                <I className="h-3.5 w-3.5" />
+                {label}
+              </button>
+            ))}
+          </div>
+          {readOnly ? (
+            <div className="shrink-0 border-b border-slate-200 p-2">
+              <Alert tone="warning" icon={Lock} title="Lecture seule">
+                {!can('pages.edit')
+                  ? 'Votre rôle ne permet pas de modifier les pages.'
+                  : 'Cette page n’est plus un brouillon : seul un utilisateur autorisé à publier peut la modifier.'}
+                {seoOnly ? ' Vous pouvez toutefois ajuster son référencement (bouton SEO).' : ''}
+              </Alert>
+            </div>
+          ) : null}
+          <div className="min-h-0 flex-1">
+            {tab === 'blocks' ? (
+              <BlocksPanel blocks={page.blocks} onChange={(blocks) => set({ blocks })} selectedId={selected} onSelect={select} readOnly={readOnly} />
+            ) : (
+              <div className="h-full overflow-y-auto scrollbar-thin">
+                <PageSettings page={page} set={set} readOnly={readOnly} seoOnly={seoOnly} canPublish={canPublish} onRevisions={() => setRevOpen(true)} />
+              </div>
+            )}
+          </div>
+        </aside>
+
+        <main className="relative hidden min-w-0 flex-1 md:block">
+          <PreviewFrame
+            path={data.path}
+            payload={payload}
+            device={device}
+            onBlockClick={(blockId) => {
+              setTab('blocks');
+              select(blockId);
+            }}
+          />
+        </main>
+      </div>
+
+      <Modal open={seoOpen} onClose={() => setSeoOpen(false)} size="xl" title="Référencement (SEO)" description="Titre et description Google, partage sur les réseaux sociaux, indexation.">
+        <SeoPanel
+          seo={page.seo}
+          onChange={(seo) => set({ seo })}
+          blocks={page.blocks}
+          kind="page"
+          url={publicUrl(site, page.path)}
+          siteName={site?.branding.siteName || 'Snapify'}
+          defaultOgImage={site?.settings.seo.defaultOgImage}
+          slugLocked
+          readOnly={readOnly && !seoOnly}
+        />
+      </Modal>
+      <SaveBar dirty={ed.dirty} saving={ed.saving} onSave={ed.commit} onReset={ed.reset} blocker={ed.blocker} />
+      <RevisionsDrawer
+        open={revOpen}
+        onClose={() => setRevOpen(false)}
+        load={() => api.pageRevisions(page.id)}
+        restore={(rev) => api.restorePage(page.id, rev)}
+        onRestored={() => void reload()}
+      />
+    </div>
+  );
+}

package/template/src/admin/pages/PagesListPage.tsx

@@ -0,0 +1,277 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import React, { useMemo, useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { toast } from 'sonner';
+import { Copy, ExternalLink, FilePlus2, FileText, MoreHorizontal, Pencil, Search, Trash2 } from 'lucide-react';
+import type { CmsPage } from '../../../server/cms/types';
+import { api, type PageWithScore } from '../lib/api';
+import { errorMessage, useAsync } from '../lib/hooks';
+import { slugify, timeAgo } from '../lib/format';
+import { useAuth } from '../context/AuthContext';
+import { publicUrl, useSite } from '../context/SiteContext';
+import { Badge, Button, Card, EmptyState, ErrorState, Field, Input, PageHeader, PageSkeleton, ScoreDot, Segmented, Select, StatusBadge, Table, Td, Th } from '../ui/primitives';
+import { Dropdown, DropdownItem, Modal, useConfirm } from '../ui/overlays';
+import { Pagination, usePagination } from '../ui/Pagination';
+
+type Filter = 'all' | CmsPage['status'];
+
+export function CreatePageModal({ open, onClose }: { open: boolean; onClose: () => void }) {
+  const navigate = useNavigate();
+  const { reload } = useSite();
+  const [title, setTitle] = useState('');
+  const [path, setPath] = useState('');
+  const [pathTouched, setPathTouched] = useState(false);
+  const [template, setTemplate] = useState<CmsPage['template']>('default');
+  const [saving, setSaving] = useState(false);
+  const effectivePath = pathTouched ? path : title ? `/${slugify(title)}/` : '';
+
+  const submit = async () => {
+    setSaving(true);
+    try {
+      const page = await api.createPage({ title: title.trim(), path: effectivePath, template });
+      toast.success('Page créée en brouillon');
+      void reload();
+      onClose();
+      navigate(`/pages/${page.id}`);
+    } catch (e) {
+      toast.error(errorMessage(e));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title="Nouvelle page"
+      description="La page est créée en brouillon : elle ne sera visible qu’après publication."
+      footer={
+        <>
+          <Button onClick={onClose}>Annuler</Button>
+          <Button variant="primary" loading={saving} disabled={!title.trim()} onClick={submit}>
+            Créer et modifier
+          </Button>
+        </>
+      }
+    >
+      <form
+        className="space-y-4"
+        onSubmit={(e) => {
+          e.preventDefault();
+          if (title.trim()) void submit();
+        }}
+      >
+        <Field label="Titre de la page">
+          <Input autoFocus value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Ex. : Audit énergétique industriel" />
+        </Field>
+        <Field label="Adresse (URL)" hint="Générée automatiquement à partir du titre. Vous pourrez la modifier plus tard.">
+          <Input
+            value={effectivePath}
+            onChange={(e) => {
+              setPathTouched(true);
+              setPath(e.target.value);
+            }}
+            placeholder="/audit-energetique/"
+          />
+        </Field>
+        <Field label="Modèle">
+          <Select
+            value={template}
+            onChange={(v) => setTemplate(v as CmsPage['template'])}
+            options={[
+              { value: 'default', label: 'Standard' },
+              { value: 'landing', label: 'Page d’atterrissage (pleine largeur)' },
+              { value: 'legal', label: 'Page légale (texte)' },
+              { value: 'project', label: 'Réalisation (fiche projet)' },
+            ]}
+          />
+        </Field>
+        <button type="submit" className="hidden" />
+      </form>
+    </Modal>
+  );
+}
+
+export default function PagesListPage() {
+  const { can } = useAuth();
+  const { site, reload: reloadSite } = useSite();
+  const confirm = useConfirm();
+  const navigate = useNavigate();
+  const { data, setData, error, loading, reload } = useAsync(() => api.pages(), []);
+  const [q, setQ] = useState('');
+  const [filter, setFilter] = useState<Filter>('all');
+  const [createOpen, setCreateOpen] = useState(false);
+
+  const counts = useMemo(() => {
+    const c = { all: 0, published: 0, draft: 0, scheduled: 0 };
+    (data || []).forEach((p) => {
+      c.all++;
+      c[p.status]++;
+    });
+    return c;
+  }, [data]);
+
+  const rows = useMemo(() => {
+    const nq = q.trim().toLowerCase();
+    return (data || [])
+      .filter((p) => filter === 'all' || p.status === filter)
+      .filter((p) => !nq || p.title.toLowerCase().includes(nq) || p.path.includes(nq))
+      .sort((a, b) => (a.path === '/' ? -1 : b.path === '/' ? 1 : a.path.localeCompare(b.path)));
+  }, [data, q, filter]);
+  const pg = usePagination(rows, 'pages', { resetKey: [q, filter] });
+
+  const duplicate = async (p: PageWithScore) => {
+    try {
+      const copy = await api.createPage({
+        title: `${p.title} (copie)`,
+        path: `${p.path.replace(/\/$/, '')}-copie/`,
+        template: p.template,
+        blocks: structuredClone(p.blocks),
+        seo: { ...structuredClone(p.seo), slug: `${p.seo.slug}-copie` },
+      });
+      toast.success('Page dupliquée');
+      void reloadSite();
+      navigate(`/pages/${copy.id}`);
+    } catch (e) {
+      toast.error(errorMessage(e));
+    }
+  };
+
+  const remove = async (p: PageWithScore) => {
+    const ok = await confirm({
+      title: 'Supprimer cette page ?',
+      message: (
+        <>
+          La page <strong>{p.title}</strong> ({p.path}) sera définitivement supprimée. Pensez à créer une redirection si elle était indexée par Google.
+        </>
+      ),
+      confirmLabel: 'Supprimer',
+      danger: true,
+    });
+    if (!ok) return;
+    try {
+      await api.deletePage(p.id);
+      setData((d) => (d || []).filter((x) => x.id !== p.id));
+      void reloadSite();
+      toast.success('Page supprimée');
+    } catch (e) {
+      toast.error(errorMessage(e));
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title="Pages"
+        description="Gérez les pages du site, leur contenu, leur statut de publication et leur référencement."
+        actions={
+          can('pages.edit') ? (
+            <Button variant="primary" icon={FilePlus2} onClick={() => setCreateOpen(true)}>
+              Nouvelle page
+            </Button>
+          ) : null
+        }
+      />
+
+      <Card padded={false}>
+        <div className="flex flex-col gap-3 border-b border-slate-100 p-4 sm:flex-row sm:items-center sm:justify-between">
+          <Segmented
+            value={filter}
+            onChange={setFilter}
+            options={[
+              { value: 'all', label: `Toutes (${counts.all})` },
+              { value: 'published', label: `Publiées (${counts.published})` },
+              { value: 'draft', label: `Brouillons (${counts.draft})` },
+              { value: 'scheduled', label: `Planifiées (${counts.scheduled})` },
+            ]}
+          />
+          <div className="relative sm:w-72">
+            <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="Rechercher une page…" className="pl-9" />
+          </div>
+        </div>
+
+        {loading && !data ? (
+          <div className="p-5">
+            <PageSkeleton />
+          </div>
+        ) : error ? (
+          <div className="p-5">
+            <ErrorState message={error} onRetry={reload} />
+          </div>
+        ) : rows.length === 0 ? (
+          <EmptyState icon={FileText} title="Aucune page trouvée" description={q ? 'Essayez un autre terme de recherche.' : 'Créez votre première page.'} />
+        ) : (
+          <Table>
+            <thead>
+              <tr>
+                <Th>Titre</Th>
+                <Th>Type de contenu</Th>
+                <Th>Statut</Th>
+                <Th>SEO</Th>
+                <Th>Modifiée</Th>
+                <Th className="w-12" />
+              </tr>
+            </thead>
+            <tbody>
+              {pg.pageItems.map((p) => (
+                <tr key={p.id} className="group hover:bg-slate-50/60">
+                  <Td>
+                    <Link to={`/pages/${p.id}`} className="block">
+                      <span className="font-medium text-slate-900 group-hover:text-brand-700">{p.title}</span>
+                      <span className="block text-xs text-slate-500">{p.path}</span>
+                    </Link>
+                  </Td>
+                  <Td>{p.contentSource === 'cms' ? <Badge tone="brand">Éditeur visuel</Badge> : <Badge>Gabarit du site</Badge>}</Td>
+                  <Td>
+                    <StatusBadge status={p.status} />
+                    {p.status === 'scheduled' && p.scheduledAt ? <span className="mt-1 block text-xs text-slate-500">{new Date(p.scheduledAt).toLocaleString('fr-FR')}</span> : null}
+                    {p.seo.noindex ? <span className="mt-1 block text-xs text-amber-600">Non indexée</span> : null}
+                  </Td>
+                  <Td>
+                    <ScoreDot score={p.seoScore} />
+                  </Td>
+                  <Td className="whitespace-nowrap text-slate-500">{timeAgo(p.updatedAt)}</Td>
+                  <Td>
+                    <Dropdown
+                      trigger={
+                        <Button variant="ghost" size="icon" aria-label="Actions">
+                          <MoreHorizontal className="h-4 w-4" />
+                        </Button>
+                      }
+                    >
+                      <DropdownItem icon={Pencil} onClick={() => navigate(`/pages/${p.id}`)}>
+                        Modifier
+                      </DropdownItem>
+                      <DropdownItem icon={ExternalLink} onClick={() => window.open(publicUrl(site, p.path), '_blank', 'noopener')}>
+                        Voir sur le site
+                      </DropdownItem>
+                      {can('pages.edit') ? (
+                        <DropdownItem icon={Copy} onClick={() => void duplicate(p)}>
+                          Dupliquer
+                        </DropdownItem>
+                      ) : null}
+                      {can('pages.delete') && p.path !== '/' ? (
+                        <DropdownItem icon={Trash2} danger onClick={() => void remove(p)}>
+                          Supprimer
+                        </DropdownItem>
+                      ) : null}
+                    </Dropdown>
+                  </Td>
+                </tr>
+              ))}
+            </tbody>
+          </Table>
+        )}
+        <Pagination {...pg.props} noun="pages" />
+      </Card>
+      <CreatePageModal open={createOpen} onClose={() => setCreateOpen(false)} />
+    </div>
+  );
+}