+
+ )
+}
diff --git a/src/app/admin/fiches/[id]/editor/page.tsx b/src/app/admin/fiches/[id]/editor/page.tsx
new file mode 100644
index 0000000..7e620df
--- /dev/null
+++ b/src/app/admin/fiches/[id]/editor/page.tsx
@@ -0,0 +1,121 @@
+'use client'
+
+import { useEffect, useState, useCallback } from 'react'
+import { useParams } from 'next/navigation'
+import toast from 'react-hot-toast'
+import { EditorProvider } from '@/components/admin/editor/EditorContext'
+import { EditorToolbar } from '@/components/admin/editor/EditorToolbar'
+import { InspectorPanel } from '@/components/admin/editor/InspectorPanel'
+import {
+ getFicheById,
+ updateFicheInContentful,
+ publishFiche,
+} from '@/services/contentful-management'
+import { FicheEditorView } from './FicheEditorView'
+
+export default function FicheEditorPage() {
+ const params = useParams()
+ const id = params.id as string
+
+ const [loading, setLoading] = useState(true)
+ const [initialValues, setInitialValues] = useState
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ {tags.length > 0 && (
+ + {values.titre || Titre non défini} +
+
+ {tags.map((tag: string) => (
+
+ {tag}
+
+ ))}
+
+
+
+
+
+ {values.resume ? (
+
+
+ setShowDetails(not)}
+ >
+ {showDetails ? 'Masquer les détails' : 'Afficher les détails'}
+
+
+ {showDetails && (
+
+ {values.contenu ? (
+
+ )}
+
+
+
+
+ )}
+ + Cliquez ici pour rédiger le résumé +
+
+
+ )}
+ + Cliquez ici pour rédiger le contenu détaillé +
+
+
+
+ {typeDispositif.length > 0 ? (
+
+
+
+
+
+
+
+
+
+
+
+ {typeDispositif.map((item: string) => (
+
+ {item}
+
+ ))}
+
+ ) : (
+ + Cliquez pour sélectionner les types de dispositif +
+ )} ++ {values.description || ( + Aucune description + )} +
+
+ {structures.length > 0 ?
+
+ Mode édition : cliquez sur un élément pour le modifier dans le panneau latéral
+
+
+
+ )
+ }
+
+ return (
+ // EditorProvider = fournit le contexte à toute la page
+
+
+
+ Chargement de la fiche...
+
+
+ {/* Barre du haut */}
+
+
+
+ {/* Zone preview — scrollable */}
+
+
+
+
+ {/* Panneau latéral — largeur fixe */}
+
+
+
+
+
+ Chargement de la fiche...
+
+ )
+ }
+
+ return (
+
+
+ ← Retour aux fiches
+
+
+
+ )
+}
diff --git a/src/app/admin/fiches/[id]/preview/page.tsx b/src/app/admin/fiches/[id]/preview/page.tsx
new file mode 100644
index 0000000..5d16fd0
--- /dev/null
+++ b/src/app/admin/fiches/[id]/preview/page.tsx
@@ -0,0 +1,220 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useParams, useRouter } from 'next/navigation'
+import { useForm } from 'react-hook-form'
+import toast from 'react-hot-toast'
+import Link from 'next/link'
+import { getStructureById, updateStructureInContentful, publishStructure } from '@/services/contentful-management'
+import { AdminStructureFields } from '@/components/admin/AdminStructureForm'
+import { types } from '@/data/structures_types'
+import { PrimaryButton } from '@/components/Buttons'
+
+export default function StructurePreviewPage() {
+ const params = useParams()
+ const id = params.id as string
+ const router = useRouter()
+ const [loading, setLoading] = useState(true)
+ const [isPublished, setIsPublished] = useState(false)
+
+ const { register, watch, reset, handleSubmit, formState: { isSubmitting } } = useForm
+
+
+
+
+ Modifier la fiche
+{nomFiche}
+
+
+ {isPublished ? '● Publié' : '○ Brouillon'}
+
+ {/* Lien vers l'éditeur visuel */}
+
+ ✏️ Éditeur visuel
+
+
+
+
+ Chargement...
+
+ const structureTypes = Object.keys(types)
+
+ return (
+ // Layout split : 2 colonnes égales
+
+
+ {/* ── COLONNE GAUCHE : formulaire ── */}
+
+ )
+}
diff --git a/src/app/admin/fiches/nouveau/page.tsx b/src/app/admin/fiches/nouveau/page.tsx
new file mode 100644
index 0000000..33e826f
--- /dev/null
+++ b/src/app/admin/fiches/nouveau/page.tsx
@@ -0,0 +1,44 @@
+'use client'
+
+import Link from 'next/link'
+import { AdminFicheForm, AdminFicheFields } from '@/components/admin/AdminFicheForm'
+import { createFicheInContentful } from '@/services/contentful-management'
+
+export default function NouvelleFichePage() {
+ const handleSave = async (data: AdminFicheFields) => {
+ await createFicheInContentful({
+ titre: data.titre,
+ slug: data.slug,
+ categorie: data.categorie,
+ description: data.description,
+ tags: data.tags.split(',').map((t) => t.trim()).filter(Boolean),
+ resume: data.resume,
+ contenu: data.contenu,
+ typeDispositif: data.typeDispositif ?? [],
+ })
+ }
+
+ return (
+
+
+ {/* Barre d'actions */}
+
+
+ {/* ── COLONNE DROITE : preview en temps réel ── */}
+
+
+ ← Retour
+
+
+
+ {/* Champs */}
+
+
+
+ Sauvegarder
+
+ {!isPublished && (
+
+ )}
+
+
+
+ {/* En-tête de la preview */}
+
+
+ Preview temps réel
+
+ {isPublished ? 'Publié' : 'Brouillon'}
+
+
+
+ {/* Rendu de la structure comme sur le site public */}
+
+
+
+
+ {/* Header de la fiche structure */}
+
+
+
+
+
+ {/* Corps */}
+ + {formValues.nom || Nom de la structure} +
+ {formValues.organisation && ( +{formValues.organisation}
+ )} + {formValues.type && ( + + {formValues.type} + + )} +
+ {formValues.description && (
+
+ {formValues.description}
+ )} + +
+ {formValues.adresse && (
+
+
+ 📍
+ {formValues.adresse}
+
+ )}
+ {formValues.tel && (
+
+ 📞
+ {formValues.tel}
+
+ )}
+ {formValues.email && (
+
+ ✉️
+ {formValues.email}
+
+ )}
+ {formValues.siteWeb && (
+
+ 🌐
+
+ {formValues.siteWeb}
+
+
+ )}
+ + La preview se met à jour en temps réel pendant que vous modifiez les champs. +
+
+
+ ← Retour aux fiches
+
+
+
+ )
+}
diff --git a/src/app/admin/fiches/page.tsx b/src/app/admin/fiches/page.tsx
new file mode 100644
index 0000000..eaef2c0
--- /dev/null
+++ b/src/app/admin/fiches/page.tsx
@@ -0,0 +1,455 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import Link from 'next/link'
+import toast from 'react-hot-toast'
+import {
+ listFiches,
+ deleteFiche,
+ publishFiche,
+} from '@/services/contentful-management'
+import { ActionMenu } from '@/components/admin/ActionMenu'
+import { BulkBar } from '@/components/admin/BulkBar'
+import { useTableFilters } from '@/hooks/useTableFilters'
+import { PencilIcon, DocumentIcon, CheckIcon, CircleIcon, ExternalLinkIcon, TrashIcon, PlusIcon, SearchIcon } from '@/components/Icons/AdminIcons'
+
+type Fiche = Awaited
+
+
+ Nouvelle fiche pratique
++ La fiche sera créée en brouillon dans l'environnement{' '} + {process.env.NEXT_PUBLIC_CONTENTFUL_ENVIRONMENT ?? 'dev'}. +
+
+
+ Chargement...
+
+ const allFilteredIds = filtered.map((f) => f.id)
+
+ return (
+
+
+ {/* En-tête */}
+
+ )
+}
diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
new file mode 100644
index 0000000..763c5df
--- /dev/null
+++ b/src/app/admin/layout.tsx
@@ -0,0 +1,101 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { useEffect, useState, type ReactNode } from 'react'
+
+const NAV = [
+ { href: '/admin', label: 'Dashboard', icon: 'DB', exact: true },
+ { href: '/admin/structures', label: 'Structures', icon: 'ST', exact: false },
+ { href: '/admin/fiches', label: 'Fiches pratiques', icon: 'FP', exact: false },
+ { href: '/admin/liens', label: 'Liens', icon: 'LI', exact: false },
+]
+
+export default function AdminLayout({ children }: { children: ReactNode }) {
+ const pathname = usePathname()
+
+ // Etat collapsed memorise dans localStorage
+ const [collapsed, setCollapsed] = useState(false)
+
+ useEffect(() => {
+ const saved = localStorage.getItem('admin-sidebar-collapsed')
+ if (saved === 'true') setCollapsed(true)
+ }, [])
+
+ const toggle = () => {
+ const next = !collapsed
+ setCollapsed(next)
+ localStorage.setItem('admin-sidebar-collapsed', String(next))
+ }
+
+ // Pas de layout sur la page login
+ if (pathname === '/admin/login') return children
+
+ return (
+
+
+
+ {/* Filtres */}
+
+
+ Fiches pratiques
++ {filtered.length !== data.length + ? `${filtered.length} sur ${data.length} fiches` + : `${data.length} fiche${data.length > 1 ? 's' : ''}`} +
+
+ {/* Toggle vue grille/tableau */}
+
+
+
+
+
+
+
+
+
+ {/* ── VUE GRILLE (identique au site live) ── */}
+ {view === 'grid' && (
+
+
+
+
+
+
+
+
+
+
+
+ {/* Sélectionner tout (vue grille) */}
+ {view === 'grid' && (
+
+ )}
+
+ {(search || Object.values(filters).some(Boolean)) && (
+
+ )}
+
+ {paginated.map((fiche) => {
+ const cat = CATEGORIE_COLORS[fiche.categorie] ?? CATEGORIE_COLORS.sante
+ const isSelected = selectedIds.has(fiche.id)
+
+ return (
+
+ )}
+
+ {/* ── VUE TABLEAU ── */}
+ {view === 'table' && (
+
+ {/* Checkbox sélection */}
+
+ )
+ })}
+
+ toggleSelect(fiche.id)}
+ className="w-4 h-4 rounded border-gray-300 bg-white shadow"
+ onClick={(e) => e.stopPropagation()}
+ />
+
+
+ {/* Menu actions */}
+
+
+
+ {/* Illustration (si disponible) */}
+
+ {fiche.illustrationUrl ? (
+ 
+ )
+ : (
+ 📄
+ )}
+
+
+ {/* Contenu */}
+
+ {/* Badge catégorie */}
+
+ {cat.label}
+
+
+ {/* Titre */}
+
+ + {fiche.titre} +
+ + {/* Footer */} +
+
+ {fiche.statut === 'published' ? 'Publié' : 'Brouillon'}
+
+
+ {new Date(fiche.updatedAt).toLocaleDateString('fr-FR')}
+
+
+
+
+
+
+
+ )}
+ | + selectedIds.has(id))} + onChange={() => toggleSelectAll(allFilteredIds)} + className="w-4 h-4 rounded border-gray-300" + aria-label="Sélectionner tout" + /> + | + {[ + { key: 'titre', label: 'Titre' }, + { key: 'categorie', label: 'Catégorie' }, + { key: 'statut', label: 'Statut' }, + { key: 'updatedAt', label: 'Modifié' }, + ].map(({ key, label }) => ( +toggleSort(key as keyof Fiche)} + className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase cursor-pointer hover:bg-gray-100" + > + + {label} + {sortKey === key + ? {sortDir === 'asc' ? '↑' : '↓'} + : ↕} + + | + ))} +Actions | +|||
|---|---|---|---|---|---|
| + toggleSelect(f.id)} className="w-4 h-4 rounded border-gray-300" aria-label="Sélectionner" /> + | +
+ {f.titre} +/{f.slug} + |
+ + {cat && {cat.label}} + | ++ + {f.statut === 'published' ? 'Publié' : 'Brouillon'} + + | +{new Date(f.updatedAt).toLocaleDateString('fr-FR')} | +
+ |
+
+
+
+
+ Afficher
+
+ éléments par page
+
+
+
+
+
+
+ Page {page} sur {totalPages}
+
+
+
+
+
+ {/* SIDEBAR */}
+
+
+ {/* CONTENU PRINCIPAL */}
+
+ {children}
+
+
+ )
+}
diff --git a/src/app/admin/liens/[id]/modifier/page.tsx b/src/app/admin/liens/[id]/modifier/page.tsx
new file mode 100644
index 0000000..6175389
--- /dev/null
+++ b/src/app/admin/liens/[id]/modifier/page.tsx
@@ -0,0 +1,119 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import toast from 'react-hot-toast'
+import { useRouter, useParams } from 'next/navigation'
+import Link from 'next/link'
+import { FormField, FormInput } from '@/components/Forms'
+import { PrimaryButton } from '@/components/Buttons'
+import { getLienById, updateLienInContentful, publishLien } from '@/services/contentful-management'
+
+type LienFields = { titre: string; url: string }
+
+export default function ModifierLienPage() {
+ const params = useParams()
+ const id = params.id as string
+ const router = useRouter()
+
+ const [loading, setLoading] = useState(true)
+ const [isPublished, setIsPublished] = useState(false)
+ const [estVide, setEstVide] = useState(false)
+
+ const { register, handleSubmit, reset, formState: { errors, isSubmitting } } = useFormChargement...
+ }
+
+ return (
+
+
+ ← Retour aux liens
+
+
+
+ )
+}
diff --git a/src/app/admin/liens/nouveau/page.tsx b/src/app/admin/liens/nouveau/page.tsx
new file mode 100644
index 0000000..d965963
--- /dev/null
+++ b/src/app/admin/liens/nouveau/page.tsx
@@ -0,0 +1,154 @@
+'use client'
+
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import toast from 'react-hot-toast'
+import { useRouter } from 'next/navigation'
+import Link from 'next/link'
+import { FormField, FormInput } from '@/components/Forms'
+import { PrimaryButton } from '@/components/Buttons'
+import { createLienInContentful } from '@/services/contentful-management'
+
+type LienFields = {
+ titre: string
+ url: string
+}
+
+export default function NouveauLienPage() {
+ const router = useRouter()
+ // typeLien contrôle quel champ s'affiche : URL ou Fichier
+ // useState = variable React qui déclenche un re-render quand elle change
+ const [typeLien, setTypeLien] = useState<'url' | 'fichier'>('url')
+
+ const {
+ register,
+ handleSubmit,
+ formState: { errors, isSubmitting },
+ } = useFormModifier le lien
+ + {estVide && ( +
+ ⚠️ Ce lien n&apo;a pas d&apo;URL ni de fichier. Ajoutez-en un avant de publier.
+
+ )}
+
+
+
+
+
+
+ ← Retour aux liens
+
+
+
+ )
+}
diff --git a/src/app/admin/liens/page.tsx b/src/app/admin/liens/page.tsx
new file mode 100644
index 0000000..a53dca3
--- /dev/null
+++ b/src/app/admin/liens/page.tsx
@@ -0,0 +1,366 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import Link from 'next/link'
+import toast from 'react-hot-toast'
+import {
+ listLiens,
+ deleteLien,
+ publishLien,
+} from '@/services/contentful-management'
+import { ActionMenu } from '@/components/admin/ActionMenu'
+import { BulkBar } from '@/components/admin/BulkBar'
+import { useTableFilters } from '@/hooks/useTableFilters'
+import { PencilIcon, DocumentIcon, CheckIcon, CircleIcon, ExternalLinkIcon, TrashIcon, PlusIcon, SearchIcon } from '@/components/Icons/AdminIcons'
+
+type Lien = AwaitedNouveau lien
+ +
+
+
+ Chargement...
+
+ return (
+
+
+ {/* Alerte liens vides */}
+ {liensVides.length > 0 && (
+
+ )
+}
diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
new file mode 100644
index 0000000..87e76e4
--- /dev/null
+++ b/src/app/admin/page.tsx
@@ -0,0 +1,121 @@
+import Link from 'next/link'
+import { listStructures, listFiches, listLiens } from '@/services/contentful-management'
+
+// Composant carte statistique — réutilisé 3 fois
+function StatCard({
+ href,
+ emoji,
+ titre,
+ total,
+ draft,
+ draftLabel = 'brouillon(s)',
+ draftDanger = false,
+}: {
+ href: string
+ emoji: string
+ titre: string
+ total: number
+ draft: number
+ draftLabel?: string
+ draftDanger?: boolean
+}) {
+ return (
+
+
+ ⚠️
+
+ )}
+
+ {/* En-tête */}
+
+
+ + {liensVides.length} lien(s) sans contenu +
++ Ces liens sont en brouillon sans URL ni fichier et ne peuvent pas être publiés. +
+
+
+
+ {/* Filtres */}
+
+
+
+ Liens
++ {filtered.length !== data.length + ? `${filtered.length} sur ${data.length} liens` + : `${data.length} lien${data.length > 1 ? 's' : ''}`} +
+
+
+
+ {/* Tableau */}
+
+
+
+
+
+
+
+
+
+
+
+ {(search || Object.values(filters).some(Boolean)) && (
+
+ )}
+
+
+
+
+
+ | + 0 && allFilteredIds.every((id) => selectedIds.has(id))} + onChange={() => toggleSelectAll(allFilteredIds)} + className="w-4 h-4 rounded border-gray-300" + aria-label="Sélectionner tout" + /> + | + {[ + { key: 'titre', label: 'Titre' }, + { key: 'url', label: 'Contenu' }, + { key: 'statut', label: 'Statut' }, + { key: 'updatedAt', label: 'Modifié' }, + ].map(({ key, label }) => ( + toggleSort(key as keyof Lien)}
+ className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase cursor-pointer hover:bg-gray-100"
+ >
+
+ {label}
+ |
+ ))}
+ Actions | +|||
|---|---|---|---|---|---|
| + Aucun lien trouvé. + | +|||||
| + toggleSelect(l.id)} + className="w-4 h-4 rounded border-gray-300" + onClick={(e) => e.stopPropagation()} + aria-label="Sélectionner le lien" + /> + | +
+
+ {l.estVide && ⚠️}
+
+ {l.titre} + |
+ + {l.url && ( + + 🔗 {l.url} + + )} + {l.hasFichier && 📎 Fichier attaché} + {l.estVide && Aucun contenu} + | ++ + {l.statut === 'published' ? 'Publié' : 'Brouillon'} + + | ++ {new Date(l.updatedAt).toLocaleDateString('fr-FR')} + | +
+ |
+
+
+
+ Afficher
+
+ éléments par page
+
+
+
+
+
+
+ Page {page} sur {totalPages}
+
+
+
+
+ {emoji}
+ {titre}
+{total}
+ {draft > 0 && ( ++ {draft} {draftLabel} +
+ )} + + ) +} + +export default async function AdminDashboard() { + // On récupère tout en parallèle pour aller plus vite + // Promise.all = lance les 3 requêtes en même temps au lieu d'attendre l'une après l'autre + const [structures, fiches, liens] = await Promise.all([ + listStructures(), + listFiches(), + listLiens(), + ]) + + // Calcul des stats + const stats = { + structures: structures.length, + structuresDraft: structures.filter((s) => s.statut === 'draft').length, + fiches: fiches.length, + fichesDraft: fiches.filter((f) => f.statut === 'draft').length, + liens: liens.length, + liensVides: liens.filter((l) => l.estVide).length, + } + + return ( +
+
+ )
+}
+
+export const dynamic = 'force-dynamic' // On force le rendu dynamique pour toujours avoir les données à jour, même en dev (pas de cache)
diff --git a/src/app/admin/structures/[id]/editor/EditStructureForm.tsx b/src/app/admin/structures/[id]/editor/EditStructureForm.tsx
new file mode 100644
index 0000000..f71b4ae
--- /dev/null
+++ b/src/app/admin/structures/[id]/editor/EditStructureForm.tsx
@@ -0,0 +1,40 @@
+'use client'
+
+import { AdminStructureForm, AdminStructureFields } from '@/components/admin/AdminStructureForm'
+import { updateStructureInContentful, publishStructure } from '@/services/contentful-management'
+
+type Props = {
+ id: string
+ defaultValues: Partial
+
+
+ {/* Alerte liens vides */}
+ {stats.liensVides > 0 && (
+ Dashboard
++ Environnement Contentful :{' '} + + {process.env.CONTENTFUL_ENVIRONMENT ?? 'master'} + + {process.env.CONTENTFUL_ENVIRONMENT === 'dev' && ( + + Mode dev — les changements n'affectent pas le site en ligne + + )} +
+
+
+
+ )}
+
+ {/* Cartes statistiques */}
+
+
+ + {stats.liensVides} lien(s) en brouillon sans contenu +
++ Ces liens ne peuvent pas être publiés. Allez dans{' '} + Liens pour les corriger. +
+
+ 0}
+ />
+
+
+
+ {/* Header */}
+
+ )
+}
diff --git a/src/app/admin/structures/[id]/editor/page.tsx b/src/app/admin/structures/[id]/editor/page.tsx
new file mode 100644
index 0000000..4fb6d55
--- /dev/null
+++ b/src/app/admin/structures/[id]/editor/page.tsx
@@ -0,0 +1,81 @@
+'use client'
+
+import { useEffect, useState, useCallback } from 'react'
+import { useParams } from 'next/navigation'
+import toast from 'react-hot-toast'
+import { EditorProvider } from '@/components/admin/editor/EditorContext'
+import { EditorToolbar } from '@/components/admin/editor/EditorToolbar'
+import { InspectorPanel } from '@/components/admin/editor/InspectorPanel'
+import {
+ getStructureById,
+ updateStructureInContentful,
+ publishStructure,
+} from '@/services/contentful-management'
+import { StructureEditorView } from './StructureEditorView'
+
+export default function StructureEditorPage() {
+ const params = useParams()
+ const id = params.id as string
+
+ const [loading, setLoading] = useState(true)
+ const [initialValues, setInitialValues] = useState
+
+
+ {/* Corps */}
+
+
+
+
+
+
+
+
+
+
+ {values.type || 'Type non défini'}
+
+
+
+ + {values.nom || Nom non défini} +
++ {values.organisation || Organisation non définie} +
+
+
+
+
+
+ {/* Description */}
+
+
+
+ {/* Coordonnées */}
+
+ + {values.description || Aucune description} +
+
+
+
+
+ {(values.tel || true) && (
+
+
+ )}
+
+
+
+
+
+
+
+
+ Coordonnées
+ +
+ 📍
+
+ {values.adresse || Adresse non définie}
+
+
+
+ 📞
+
+ {values.tel || Téléphone non défini}
+
+
+
+ ✉️
+
+ {values.email || Email non défini}
+
+
+
+ 🖊️ Mode édition — Cliquez sur n'importe quel élément pour le modifier
+
+
+
+
+ )
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ Chargement...
+
+ )
+ }
+
+ return (
+
+
+ ← Retour aux structures
+
+
+
+ )
+}
diff --git a/src/app/admin/structures/nouveau/page.tsx b/src/app/admin/structures/nouveau/page.tsx
new file mode 100644
index 0000000..9c47e95
--- /dev/null
+++ b/src/app/admin/structures/nouveau/page.tsx
@@ -0,0 +1,49 @@
+'use client'
+
+import Link from 'next/link'
+import { AdminStructureForm, AdminStructureFields } from '@/components/admin/AdminStructureForm'
+import { createStructureInContentful } from '@/services/contentful-management'
+
+export default function NouvelleStructurePage() {
+ const handleSave = async (data: AdminStructureFields) => {
+ // createStructureInContentful existe déjà dans le projet !
+ // On l'appelle directement — pas besoin de route API intermédiaire
+ // car 'use server' dans contentful-management.ts autorise l'appel direct.
+ await createStructureInContentful({
+ nom: data.nom,
+ organisation: data.organisation,
+ type: data.type,
+ adresse: data.adresse,
+ siteWeb: data.siteWeb,
+ email: data.email,
+ tel: data.tel,
+ description: data.description,
+ })
+ }
+
+ return (
+
+
+
+
+
+ Modifier la structure
+{nomStructure}
+
+
+ {isPublished ? '● Publié' : '○ Brouillon'}
+
+
+ ✏️ Éditeur visuel
+
+
+
+
+
+
+ ← Retour aux structures
+
+
+
+ )
+}
diff --git a/src/app/admin/structures/page.tsx b/src/app/admin/structures/page.tsx
new file mode 100644
index 0000000..3ff7f8b
--- /dev/null
+++ b/src/app/admin/structures/page.tsx
@@ -0,0 +1,410 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import toast from 'react-hot-toast'
+import {
+ listStructures,
+ deleteStructure,
+ publishStructure,
+} from '@/services/contentful-management'
+import { ActionMenu } from '@/components/admin/ActionMenu'
+import { BulkBar } from '@/components/admin/BulkBar'
+import { useTableFilters } from '@/hooks/useTableFilters'
+import { types } from '@/data/structures_types'
+import { PencilIcon, DocumentIcon, CheckIcon, CircleIcon, ExternalLinkIcon, TrashIcon, PlusIcon, SearchIcon } from '@/components/Icons/AdminIcons'
+
+type Structure = Awaited
+
+
+ Nouvelle structure
++ La structure sera créée en brouillon dans l'environnement{' '} + {process.env.NEXT_PUBLIC_CONTENTFUL_ENVIRONMENT ?? 'dev'}. +
+
+
+ Chargement...
+
+ return (
+
+
+ {/* ── EN-TÊTE ── */}
+
+ )
+}
diff --git a/src/assets/styles.css b/src/assets/styles.css
index cbe988f..b5c7ee5 100644
--- a/src/assets/styles.css
+++ b/src/assets/styles.css
@@ -31,3 +31,58 @@ html, body, #__next {
.leaflet-bar {
@apply print:hidden;
}
+
+/* ── Tiptap Editor ── */
+.ProseMirror {
+ outline: none;
+}
+
+.ProseMirror p.is-editor-empty:first-child::before {
+ color: #adb5bd;
+ content: attr(data-placeholder);
+ float: left;
+ height: 0;
+ pointer-events: none;
+}
+
+.ProseMirror img {
+ max-width: 100%;
+ border-radius: 6px;
+ margin: 8px 0;
+ /* L'image est inline donc on peut la placer au milieu du texte */
+ vertical-align: middle;
+}
+
+.ProseMirror img.ProseMirror-selectednode {
+ outline: 2px solid #3b82f6;
+ outline-offset: 2px;
+}
+
+.ProseMirror a {
+ color: #2563eb;
+ text-decoration: underline;
+ cursor: pointer;
+}
+
+.ProseMirror blockquote {
+ border-left: 3px solid #e5e7eb;
+ padding-left: 1rem;
+ color: #6b7280;
+ margin: 1rem 0;
+ font-style: italic;
+}
+
+.ProseMirror hr {
+ border: none;
+ border-top: 2px solid #e5e7eb;
+ margin: 1.5rem 0;
+}
+
+.ProseMirror ul,
+.ProseMirror ol {
+ padding-left: 1.5rem;
+}
+
+.ProseMirror h1 { font-size: 1.75rem; font-weight: 700; margin: 1.2rem 0 0.6rem; }
+.ProseMirror h2 { font-size: 1.4rem; font-weight: 600; margin: 1rem 0 0.5rem; }
+.ProseMirror h3 { font-size: 1.15rem; font-weight: 600; margin: 0.8rem 0 0.4rem; }
\ No newline at end of file
diff --git a/src/components/Icons/AdminIcons.tsx b/src/components/Icons/AdminIcons.tsx
new file mode 100644
index 0000000..d2802dc
--- /dev/null
+++ b/src/components/Icons/AdminIcons.tsx
@@ -0,0 +1,75 @@
+export function PencilIcon({ className = 'w-4 h-4' }: { className?: string }) {
+ return (
+
+ )
+}
+
+export function LinkIcon({ className = 'w-4 h-4' }: { className?: string }) {
+ return (
+
+ )
+}
+
+export function DocumentIcon({ className = 'w-4 h-4' }: { className?: string }) {
+ return (
+
+ )
+}
+
+export function PlusIcon({ className = 'w-4 h-4' }: { className?: string }) {
+ return (
+
+ )
+}
+
+export function TrashIcon({ className = 'w-4 h-4' }: { className?: string }) {
+ return (
+
+ )
+}
+
+export function CheckIcon({ className = 'w-4 h-4' }: { className?: string }) {
+ return (
+
+ )
+}
+
+export function CircleIcon({ className = 'w-4 h-4' }: { className?: string }) {
+ return (
+
+ )
+}
+
+export function ExternalLinkIcon({ className = 'w-4 h-4' }: { className?: string }) {
+ return (
+
+ )
+}
+
+export function SearchIcon({ className = 'w-4 h-4' }: { className?: string }) {
+ return (
+
+ )
+}
+
diff --git a/src/components/admin/ActionMenu.tsx b/src/components/admin/ActionMenu.tsx
new file mode 100644
index 0000000..4e7dc4a
--- /dev/null
+++ b/src/components/admin/ActionMenu.tsx
@@ -0,0 +1,121 @@
+'use client'
+
+import { useState, useRef, useEffect, ReactNode } from 'react'
+
+export type Action = {
+ label: string
+ icon?: ReactNode
+ onClick: () => void
+ variant?: 'default' | 'danger'
+ disabled?: boolean
+ divider?: boolean // ligne de séparation avant cet item
+}
+
+type Props = {
+ actions: Action[]
+}
+
+export function ActionMenu({ actions }: Props) {
+ const [open, setOpen] = useState(false)
+ const ref = useRef
+
+
+ {/* ── FILTRES ── */}
+
+
+
+ Structures
++ {filtered.length !== data.length + ? `${filtered.length} sur ${data.length} structures` + : `${data.length} structure${data.length > 1 ? 's' : ''}`} +
+
+
+ {/* Recherche */}
+
+
+ {/* ── TABLEAU ── */}
+
+
+
+ {/* Filtre statut */}
+
+
+ {/* Filtre type */}
+
+
+
+
+
+
+ {/* Reset */}
+ {(search || Object.values(filters).some(Boolean)) && (
+
+ )}
+
+
+
+
+
+ | + toggleSelectAll(allFilteredIds)} + className="w-4 h-4 rounded border-gray-300" + aria-label="Sélectionner tout" + /> + | + + {/* Colonnes triables */} + {[ + { key: 'nom', label: 'Nom' }, + { key: 'type', label: 'Type' }, + { key: 'adresse', label: 'Adresse' }, + { key: 'statut', label: 'Statut' }, + { key: 'updatedAt', label: 'Modifié' }, + ].map(({ key, label }) => ( + toggleSort(key as keyof Structure)}
+ className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer select-none hover:bg-gray-100"
+ >
+
+ {label}
+ |
+ ))}
+
+ + Actions + | +||||
|---|---|---|---|---|---|---|
| + Aucune structure ne correspond à vos critères. + | +||||||
| + toggleSelect(s.id)} + className="w-4 h-4 rounded border-gray-300" + onClick={(e) => e.stopPropagation()} + aria-label={`Sélectionner ${s.nom}`} + /> + | + + {/* Nom */} +
+ {s.nom} + {s.organisation &&{s.organisation} } + |
+
+ {/* Type */}
+ + {s.type} + | + + {/* Adresse */} ++ {s.adresse} + | + + {/* Statut */} ++ + {s.statut === 'published' ? 'Publié' : 'Brouillon'} + + | + + {/* Date modif */} ++ {new Date(s.updatedAt).toLocaleDateString('fr-FR')} + | + + {/* Menu actions */} +
+ |
+
+
+
+ {/* Barre d'actions en masse */}
+
+ Afficher
+
+ éléments par page
+
+
+
+
+
+
+ Page {page} sur {totalPages}
+
+
+
+
+
+ {/* Bouton déclencheur */}
+
+
+ {/* Dropdown */}
+ {open && (
+
+ )
+}
diff --git a/src/components/admin/AdminFicheForm.tsx b/src/components/admin/AdminFicheForm.tsx
new file mode 100644
index 0000000..2f54331
--- /dev/null
+++ b/src/components/admin/AdminFicheForm.tsx
@@ -0,0 +1,502 @@
+'use client'
+
+import { useForm, Controller } from 'react-hook-form'
+import toast from 'react-hot-toast'
+import { useRouter } from 'next/navigation'
+import Link from 'next/link'
+import { PrimaryButton } from '@/components/Buttons'
+import { useState } from 'react'
+import { AssetPicker } from '@/components/admin/editor/AssetPicker'
+import { setFicheIllustration } from '@/services/contentful-management'
+import { LiensPicker } from '@/components/admin/editor/LiensPicker'
+import { QuickLienCreator } from '@/components/admin/QuickLienCreator'
+
+// Tous les types de dispositif extraits de contentful.d.ts
+const TYPES_DISPOSITIF = [
+ 'Accompagnement MNA',
+ "Association d'aide aux migrants",
+ 'Association LGBTQIA+',
+ 'Associations caritatives - Distribution Alimentaire',
+ "Associations d'accompagnement personnes en situation de prostitution",
+ 'CAARUD',
+ 'CADA',
+ 'CAES',
+ 'CD',
+ 'CEGIDD',
+ 'Centre de vaccination',
+ 'COREVIH',
+ 'CPH',
+ 'CPTS',
+ 'CSAPA',
+ 'Filières gérontologiques',
+ 'HUDA',
+ 'MDPH',
+ 'MSP',
+ 'OFII',
+ 'PASS',
+ 'PRAHDA',
+ 'Préfecture',
+ 'Réseaux polyvalents (tous âges et toutes pathologies)',
+ 'SIAO',
+ 'SPADA',
+] as const
+
+const CATEGORIES = [
+ { value: 'sante', label: 'Accès à la santé' },
+ { value: 'besoins-primaires', label: 'Besoins primaires' },
+ { value: 'social', label: 'Social' },
+ { value: 'interpretariat', label: 'Interprétariat' },
+]
+
+export type AdminFicheFields = {
+ titre: string
+ slug: string
+ categorie: string
+ description: string
+ tags: string
+ resume: string
+ contenu: string
+ typeDispositif: string[]
+ outilsIds: string[]
+ patientIds: string[]
+ pourEnsavoirPlusIds: string[]
+}
+
+type Props = {
+ ficheId?: string
+ illustrationUrl?: string
+ defaultValues?: Partial
+ {actions.map((action, i) => (
+
+ )}
+
+ {action.divider && i > 0 && (
+
+ )}
+
+
+ ))}
+
+ {/* Compteur */}
+
+ {count} sélectionné{count > 1 ? 's' : ''}
+
+
+ {/* Bouton publier */}
+ {onPublish && (
+
+ )}
+
+ {/* Bouton supprimer */}
+
+
+ {/* Désélectionner tout */}
+
+
+ )
+}
diff --git a/src/components/admin/DeleteConfirmModal.tsx b/src/components/admin/DeleteConfirmModal.tsx
new file mode 100644
index 0000000..ff9a7eb
--- /dev/null
+++ b/src/components/admin/DeleteConfirmModal.tsx
@@ -0,0 +1,137 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+
+type Props = {
+ nom: string
+ onConfirm: () => Promise
+
+ )}
+
+ )
+}
diff --git a/src/components/admin/SearchFilter.tsx b/src/components/admin/SearchFilter.tsx
new file mode 100644
index 0000000..7239866
--- /dev/null
+++ b/src/components/admin/SearchFilter.tsx
@@ -0,0 +1,76 @@
+'use client'
+
+import { SearchIcon } from '@/components/Icons/AdminIcons'
+
+type FilterOption = { value: string; label: string }
+
+type Props = {
+ searchValue: string
+ onSearchChange: (v: string) => void
+ placeholder?: string
+ filters?: {
+ label: string
+ value: string
+ onChange: (v: string) => void
+ options: FilterOption[]
+ }[]
+ totalCount: number
+ filteredCount: number
+}
+
+export function SearchFilter({
+ searchValue,
+ onSearchChange,
+ placeholder = 'Rechercher...',
+ filters = [],
+ totalCount,
+ filteredCount,
+}: Props) {
+ return (
+
+
+ )
+}
diff --git a/src/components/admin/editor/AssetPicker.tsx b/src/components/admin/editor/AssetPicker.tsx
new file mode 100644
index 0000000..4673f31
--- /dev/null
+++ b/src/components/admin/editor/AssetPicker.tsx
@@ -0,0 +1,251 @@
+'use client'
+
+import { useState, useCallback, ChangeEvent } from 'react'
+import { listAssets, uploadAssetToContentful } from '@/services/contentful-management'
+
+type Asset = { id: string; titre: string; url: string; contentType: string; fileName: string }
+
+type Props = {
+ // 'illustration' = sélection unique + aperçu
+ // 'embed' = sélection pour insertion dans le rich text
+ mode: 'illustration' | 'embed'
+ currentAssetUrl?: string
+ onSelect: (asset: Asset) => void
+ onClose: () => void
+}
+
+export function AssetPicker({ mode, currentAssetUrl, onSelect, onClose }: Props) {
+ const [assets, setAssets] = useState
+
+ {/* Champ de recherche texte */}
+
+
+
+
+ {/* Filtres select */}
+ {filters.map((filter) => (
+
+
+
+ ))}
+
+ {/* Compteur de résultats */}
+
+ {filteredCount !== totalCount ? (
+ <>
+ {filteredCount} / {totalCount}
+
+ ) : (
+ <>
+ {totalCount} résultat{totalCount > 1 ? 's' : ''}
+
+ )}
+
+
+
+ )
+}
diff --git a/src/components/admin/editor/EditableField.tsx b/src/components/admin/editor/EditableField.tsx
new file mode 100644
index 0000000..88eb9c9
--- /dev/null
+++ b/src/components/admin/editor/EditableField.tsx
@@ -0,0 +1,110 @@
+// src/components/admin/editor/EditableField.tsx
+// Wrapper qui rend n'importe quel élément HTML "cliquable" en mode édition.
+// Au survol : contour bleu + curseur pointer.
+// Au clic : sélectionne le champ dans l'EditorContext.
+// En mode non-édition (site public) : transparent, aucun impact.
+
+'use client'
+
+import type { ElementType, ReactNode } from 'react'
+import { useRef, useState } from 'react'
+import { useEditor, FieldDefinition } from './EditorContext'
+
+type Props = {
+ // Définition du champ (clé, label, type...)
+ field: FieldDefinition
+ // Contenu à afficher (le rendu live depuis les values du contexte)
+ children: ReactNode
+ // Classes CSS supplémentaires à appliquer sur le wrapper
+ className?: string
+ // Tag HTML du wrapper (div par défaut)
+ as?: ElementType
+}
+
+export function EditableField({
+ field,
+ children,
+ className = '',
+ as: Tag = 'div',
+}: Props) {
+ const { selectField, selectedField } = useEditor()
+ const [isHovered, setIsHovered] = useState(false)
+ const ref = useRef e.stopPropagation()}
+ >
+ {/* Header */}
+
+
+
+
+ {/* Tabs */}
+ + {mode === 'illustration' ? 'Choisir une illustration' : 'Insérer un asset'} +
+ +
+ {[
+ { key: 'existing', label: '📁 Assets existants', onClick: handleTabExisting },
+ { key: 'upload', label: '⬆️ Uploader un fichier', onClick: () => setTab('upload') },
+ ].map(({ key, label, onClick }) => (
+
+ ))}
+
+
+ {/* Corps */}
+
+
+ {/* Onglet : assets existants */}
+ {tab === 'existing' && (
+ <>
+
+
+ handleSearch(e.target.value)}
+ placeholder="Rechercher un asset par titre..."
+ style={{
+ width: '100%',
+ border: '1px solid #e5e7eb',
+ borderRadius: 8,
+ padding: '7px 12px',
+ fontSize: 13,
+ outline: 'none',
+ boxSizing: 'border-box',
+ }}
+ />
+
+
+
+ {loading && (
+
+
+ )}
+
+ {/* Onglet : upload */}
+ {tab === 'upload' && (
+ Chargement...
+ )} + + {!loading && filtered.length === 0 && ( ++ Aucun asset trouvé. +
+ )} + + {/* Grille d'assets */} +
+ {filtered.map((asset) => (
+
+ ))}
+
+
+
+ )}
+
+
+ ⬆️
+ + {mode === 'illustration' + ? 'Choisissez une image à uploader (PNG, JPG, SVG...)' + : 'Choisissez un fichier à uploader (image, PDF, doc...)'} +
++ Le fichier sera uploadé dans Contentful Media et automatiquement sélectionné. +
+ +
+ {/* Lien retour */}
+ { e.currentTarget.style.background = '#1f2937' }}
+ onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent' }}
+ >
+ ← Retour
+
+
+ {/* Séparateur */}
+
+
+ {/* Titre */}
+
+ {titre}
+
+
+ {/* Indicateur de modification non sauvegardée */}
+ {isDirty && (
+
+ ● Modifications non sauvegardées
+
+ )}
+
+ {/* Badge statut */}
+
+ {isPublished ? '● Publié' : '○ Brouillon'}
+
+
+ {/* Bouton Sauvegarder */}
+
+
+ {/* Bouton Publier */}
+
+
+ )
+}
diff --git a/src/components/admin/editor/InspectorPanel.tsx b/src/components/admin/editor/InspectorPanel.tsx
new file mode 100644
index 0000000..7def470
--- /dev/null
+++ b/src/components/admin/editor/InspectorPanel.tsx
@@ -0,0 +1,111 @@
+'use client'
+
+import { useEditor } from './EditorContext'
+import { TextField } from './fields/TextField'
+import { TextareaField } from './fields/TextareaField'
+import { SelectField } from './fields/SelectField'
+import { CheckboxGroupField } from './fields/CheckboxGroupField'
+import { RichTextEditor } from './RichTextEditor'
+import { LiensPicker } from './LiensPicker'
+
+export function InspectorPanel() {
+ const { selectedField, values, updateValue, clearSelection } = useEditor()
+
+ if (!selectedField) {
+ return (
+
+
+ )
+ }
+
+ const value = values[selectedField.key]
+ const handleChange = (newValue: any) => updateValue(selectedField.key, newValue)
+
+ let fieldTypeLabel = 'Texte'
+ if (selectedField.type === 'markdown') {
+ fieldTypeLabel = 'Contenu riche'
+ } else if (selectedField.type === 'checkboxGroup') {
+ fieldTypeLabel = 'Cases à cocher'
+ } else if (selectedField.type === 'select') {
+ fieldTypeLabel = 'Liste déroulante'
+ } else if (selectedField.type === 'textarea') {
+ fieldTypeLabel = 'Texte long'
+ } else if (selectedField.type === 'image') {
+ fieldTypeLabel = 'Image'
+ }
+
+ return (
+
+ 👆
+
+ + Cliquez sur un élément +
++ Survolez n'importe quel texte, image ou bloc dans la preview + pour voir le contour bleu, puis cliquez pour l'éditer ici. +
+
+
+ {/* Header */}
+
+ )
+}
diff --git a/src/components/admin/editor/LiensPicker.tsx b/src/components/admin/editor/LiensPicker.tsx
new file mode 100644
index 0000000..97e920b
--- /dev/null
+++ b/src/components/admin/editor/LiensPicker.tsx
@@ -0,0 +1,269 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { listLiens, createLienAndLinkToFiche } from '@/services/contentful-management'
+import toast from 'react-hot-toast'
+
+type LienItem = {
+ id: string
+ titre: string
+ url?: string
+ hasFichier: boolean
+ statut: string
+}
+
+type Props = {
+ titre: string
+ selectedIds: string[]
+ onChange: (ids: string[]) => void
+ // Si ficheId + bloc sont fournis → permet la création rapide
+ ficheId?: string
+ bloc?: 'outils' | 'patients' | 'pourEnSavoirPlus'
+}
+
+export function LiensPicker({ titre, selectedIds, onChange, ficheId, bloc }: Props) {
+ const [allLiens, setAllLiens] = useState
+
+
+ {/* Champ d'édition — scrollable */}
+
+
+
+ {selectedField.label}
++ {fieldTypeLabel} +
+
+
+ {selectedField.type === 'text' && (
+
+ + 💡 {selectedField.hint} +
+ )} + + {selectedField.type === 'liens' && ( +
+ {/* Liens actuellement sélectionnés */}
+ {selectedIds.length > 0 && (
+
+ )
+}
diff --git a/src/components/admin/editor/RichTextEditor.tsx b/src/components/admin/editor/RichTextEditor.tsx
new file mode 100644
index 0000000..4e7f851
--- /dev/null
+++ b/src/components/admin/editor/RichTextEditor.tsx
@@ -0,0 +1,132 @@
+'use client'
+
+import { useEditor, EditorContent } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import ImageExtension from '@tiptap/extension-image'
+import LinkExtension from '@tiptap/extension-link'
+import Underline from '@tiptap/extension-underline'
+import TextAlign from '@tiptap/extension-text-align'
+import Placeholder from '@tiptap/extension-placeholder'
+import Color from '@tiptap/extension-color'
+import { TextStyle } from '@tiptap/extension-text-style'
+import { Markdown } from 'tiptap-markdown'
+import { useEffect, useState } from 'react'
+import { RichTextToolbar } from './RichTextToolbar'
+import { AssetPicker } from './AssetPicker'
+
+type Props = {
+ value: string
+ onChange: (markdown: string) => void
+ placeholder?: string
+ minHeight?: number
+}
+
+export function RichTextEditor({
+ value,
+ onChange,
+ placeholder = 'Commencez à écrire...',
+ minHeight = 200,
+}: Props) {
+// ÉTAT POUR OUVRIR LE PICKER
+ const [showAssetPicker, setShowAssetPicker] = useState(false)
+
+ const editor = useEditor({
+ immediatelyRender: false,
+
+ extensions: [
+ StarterKit,
+ Underline,
+ TextStyle,
+ Color,
+ ImageExtension.configure({
+ inline: true,
+ allowBase64: true,
+ }),
+ LinkExtension.configure({ openOnClick: false }),
+ TextAlign.configure({ types: ['heading', 'paragraph'] }),
+ Placeholder.configure({ placeholder }),
+ Markdown.configure({
+ html: false,
+ transformCopiedText: true,
+ transformPastedText: true,
+ }),
+ ],
+
+ content: value,
+
+ onUpdate: ({ editor: e }) => {
+ const md = (e.storage as any).markdown?.getMarkdown?.() ?? ''
+ onChange(md)
+ },
+
+ editorProps: {
+ attributes: {
+ class: 'prose max-w-none focus:outline-none',
+ style: `min-height: ${minHeight}px; padding: 16px; font-size: 14px;`,
+ },
+ },
+ })
+
+ // FONCTION POUR INSÉRER IMAGE / LIEN
+ const handleEmbedAsset = (asset: {
+ id: string
+ titre: string
+ url: string
+ contentType: string
+ }) => {
+ setShowAssetPicker(false)
+
+ if (asset.contentType.startsWith('image/')) {
+ editor?.chain().focus().setImage({
+ src: asset.url,
+ alt: asset.titre,
+ }).run()
+ } else {
+ editor?.chain().focus()
+ .extendMarkRange('link')
+ .insertContent(
+ `${asset.titre}`
+ )
+ .run()
+ }
+ }
+
+ // Sync si valeur externe change
+ useEffect(() => {
+ if (!editor) return
+ const current = (editor.storage as any).markdown?.getMarkdown?.() ?? ''
+ if (value !== current) {
+ editor.commands.setContent(value, { emitUpdate: false })
+ }
+ }, [value, editor])
+
+ // UI
+ return (
+
+ {selectedLiens.map((lien) => (
+
+ )}
+
+ {/* Boutons d'action */}
+
+
+ ))}
+
+ {lien.hasFichier ? '📎' : '🔗'}
+ {lien.titre}
+ {lien.url && (
+ {lien.url}
+ )}
+
+
+
+
+ {ficheId && bloc && (
+
+ )}
+
+
+ {/* Formulaire de création rapide */}
+ {showCreate && (
+
+
+ )}
+
+ {/* Picker liens existants */}
+ {isOpen && (
+ Nouveau lien — {titre}
+
+
+ setNewTitre(e.target.value)}
+ placeholder="Ex : Guide AME 2024"
+ className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-200"
+ />
+
+
+
+ setNewUrl(e.target.value)}
+ placeholder="https://..."
+ className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-200"
+ />
+
+
+
+
+
+
+ {/* Recherche */}
+
+ )}
+
+ setSearch(e.target.value)}
+ placeholder="Rechercher un lien..."
+ className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-200"
+ />
+
+
+ {/* Liste */}
+
+ {loading && (
+
+
+ {/* Footer */}
+ Chargement...
+ )} + {!loading && filteredLiens.length === 0 && ( +Aucun lien trouvé.
+ )} + {filteredLiens.map((lien) => { + const isSelected = selectedIds.includes(lien.id) + return ( + + ) + })} +
+
+ {selectedIds.length} sélectionné{selectedIds.length > 1 ? 's' : ''}
+
+
+
+
+ {/* ✅ Toolbar avec bouton pour ouvrir picker */}
+ setShowAssetPicker(true)}
+ />
+
+ {/* ✅ Éditeur */}
+ setShowAssetPicker(false)}
+ />
+ )}
+
+ )
+}
diff --git a/src/components/admin/editor/RichTextToolbar.tsx b/src/components/admin/editor/RichTextToolbar.tsx
new file mode 100644
index 0000000..7fb3607
--- /dev/null
+++ b/src/components/admin/editor/RichTextToolbar.tsx
@@ -0,0 +1,246 @@
+'use client'
+
+import { Editor } from '@tiptap/react'
+import { useRef } from 'react'
+
+type Props = {
+ editor: Editor | null
+ onEmbedAsset?: () => void
+}
+
+type BtnProps = {
+ onClick: () => void
+ isActive?: boolean
+ title: string
+ children: React.ReactNode
+ disabled?: boolean
+}
+
+function Btn({ onClick, isActive, title, children, disabled }: BtnProps) {
+ return (
+
+ )
+}
+
+function Sep() {
+ return
+}
+
+export function RichTextToolbar({ editor, onEmbedAsset }: Props) {
+ const fileInputRef = useRef
+ {/* Titres */}
+ editor.chain().focus().toggleHeading({ level: 1 }).run()} isActive={editor.isActive('heading', { level: 1 })} title="Titre 1">H1
+ editor.chain().focus().toggleHeading({ level: 2 }).run()} isActive={editor.isActive('heading', { level: 2 })} title="Titre 2">H2
+ editor.chain().focus().toggleHeading({ level: 3 }).run()} isActive={editor.isActive('heading', { level: 3 })} title="Titre 3">H3
+
+ editor.chain().focus().toggleBold().run()} isActive={editor.isActive('bold')} title="Gras (Ctrl+B)">
+ B
+
+ editor.chain().focus().toggleItalic().run()} isActive={editor.isActive('italic')} title="Italique (Ctrl+I)">
+ I
+
+ editor.chain().focus().toggleUnderline().run()} isActive={editor.isActive('underline')} title="Souligné (Ctrl+U)">
+ U
+
+ editor.chain().focus().toggleStrike().run()} isActive={editor.isActive('strike')} title="Barré">
+ S
+
+
+ editor.chain().focus().unsetColor().run()}
+ disabled={!editor.getAttributes('textStyle').color}
+ title="Supprimer la couleur"
+ >
+ A✕
+
+
+ editor.chain().focus().toggleBulletList().run()} isActive={editor.isActive('bulletList')} title="Liste à puces">•≡
+ editor.chain().focus().toggleOrderedList().run()} isActive={editor.isActive('orderedList')} title="Liste numérotée">1≡
+
+ editor.chain().focus().setTextAlign('left').run()} isActive={editor.isActive({ textAlign: 'left' })} title="Gauche">⬛
+ editor.chain().focus().setTextAlign('center').run()} isActive={editor.isActive({ textAlign: 'center' })} title="Centre">⊟
+ editor.chain().focus().setTextAlign('right').run()} isActive={editor.isActive({ textAlign: 'right' })} title="Droite">⬜
+
+
+ 🔗
+
+
+ fileInputRef.current?.click()} title="Insérer une image (depuis mon ordinateur)">
+ 📁
+
+
+ 🖼
+
+
+
+ + Embed
+
+ )}
+
+ {/* Input file caché */}
+
+
+ editor.chain().focus().toggleBlockquote().run()} isActive={editor.isActive('blockquote')} title="Citation">`
+ editor.chain().focus().setHorizontalRule().run()} title="Ligne de séparation">—
+
+ editor.chain().focus().undo().run()} disabled={!editor.can().undo()} title="Annuler (Ctrl+Z)">↩
+ editor.chain().focus().redo().run()} disabled={!editor.can().redo()} title="Rétablir (Ctrl+Y)">↪
+
+ )
+}
diff --git a/src/components/admin/editor/fields/CheckboxGroupField.tsx b/src/components/admin/editor/fields/CheckboxGroupField.tsx
new file mode 100644
index 0000000..204dd59
--- /dev/null
+++ b/src/components/admin/editor/fields/CheckboxGroupField.tsx
@@ -0,0 +1,41 @@
+'use client'
+
+import { FieldDefinition } from '../EditorContext'
+
+type Props = {
+ field: FieldDefinition
+ value: string[]
+ onChange: (v: string[]) => void
+}
+
+export function CheckboxGroupField({ field, value, onChange }: Props) {
+ const toggle = (opt: string) => {
+ const next = value.includes(opt)
+ ? value.filter((v) => v !== opt)
+ : [...value, opt]
+ onChange(next)
+ }
+
+ return (
+
+ {field.options?.map((opt) => (
+
+ ))}
+
+ )
+}
diff --git a/src/components/admin/editor/fields/MarkdownField.tsx b/src/components/admin/editor/fields/MarkdownField.tsx
new file mode 100644
index 0000000..299b13f
--- /dev/null
+++ b/src/components/admin/editor/fields/MarkdownField.tsx
@@ -0,0 +1,47 @@
+'use client'
+
+import { useState } from 'react'
+import { FieldDefinition } from '../EditorContext'
+
+type Props = {
+ field: FieldDefinition
+ value: string
+ onChange: (v: string) => void
+}
+
+export function MarkdownField({ field: _field, value, onChange }: Props) {
+ const [showGuide, setShowGuide] = useState(false)
+
+ return (
+ {value.length} sélectionné(s)
+
+ {/* Toggle guide Markdown */}
+
+
+ {showGuide && (
+
+
+ )}
+
+ **gras** → gras
+*italique* → italique
+# Titre 1 ## Titre 2
+- item de liste
+[texte](url) → lien
+--- → ligne de séparation
+