From e89d2fc4c34a99c6b67827bb895ad31a5eff10e6 Mon Sep 17 00:00:00 2001
From: Luc SORIGNET <luc.sorignet@gmail.com>
Date: Mon, 1 Sep 2025 11:08:21 +0200
Subject: [PATCH] feat: Ajout FormTemplateBuilder [N3WTS-17]

---
 Front-End/src/app/[locale]/page.js            |   3 +-
 .../src/components/Form/AddFieldModal.js      | 354 +++++++++++
 Front-End/src/components/Form/FormRenderer.js |  26 +-
 .../components/Form/FormTemplateBuilder.js    | 596 ++++++++++++++++++
 Front-End/src/components/Form/FormTypes.js    |  14 +
 Front-End/src/components/Form/IconSelector.js | 145 +++++
 docs/manuels/installation/premier-pas.md      |  94 +++
 7 files changed, 1229 insertions(+), 3 deletions(-)
 create mode 100644 Front-End/src/components/Form/AddFieldModal.js
 create mode 100644 Front-End/src/components/Form/FormTemplateBuilder.js
 create mode 100644 Front-End/src/components/Form/FormTypes.js
 create mode 100644 Front-End/src/components/Form/IconSelector.js
 create mode 100644 docs/manuels/installation/premier-pas.md

diff --git a/Front-End/src/app/[locale]/page.js b/Front-End/src/app/[locale]/page.js
index 8f13814..831066e 100644
--- a/Front-End/src/app/[locale]/page.js
+++ b/Front-End/src/app/[locale]/page.js
@@ -4,6 +4,7 @@ import React from 'react';
 import Button from '@/components/Form/Button';
 import Logo from '@/components/Logo'; // Import du composant Logo
 import FormRenderer from '@/components/Form/FormRenderer';
+import FormTemplateBuilder from '@/components/Form/FormTemplateBuilder';
 
 export default function Home() {
   const t = useTranslations('homePage');
@@ -14,7 +15,7 @@ export default function Home() {
       <h1 className="text-4xl font-bold mb-4">{t('welcomeParents')}</h1>
       <p className="text-lg mb-8">{t('pleaseLogin')}</p>
       <Button text={t('loginButton')} primary href="/users/login" />
-      <FormRenderer />
+      <FormTemplateBuilder />
     </div>
   );
 }
diff --git a/Front-End/src/components/Form/AddFieldModal.js b/Front-End/src/components/Form/AddFieldModal.js
new file mode 100644
index 0000000..63332e1
--- /dev/null
+++ b/Front-End/src/components/Form/AddFieldModal.js
@@ -0,0 +1,354 @@
+import React, { useState } from 'react';
+import { useForm, Controller } from 'react-hook-form';
+import InputTextIcon from './InputTextIcon';
+import SelectChoice from './SelectChoice';
+import Button from './Button';
+import IconSelector from './IconSelector';
+import * as LucideIcons from 'lucide-react';
+import { FIELD_TYPES } from './FormTypes';
+
+export default function AddFieldModal({
+  isOpen,
+  onClose,
+  onSubmit,
+  editingField = null,
+  editingIndex = -1,
+}) {
+  const isEditing = editingIndex >= 0;
+
+  const [currentField, setCurrentField] = useState(
+    editingField || {
+      id: '',
+      label: '',
+      type: 'text',
+      required: false,
+      icon: '',
+      options: [],
+      text: '',
+      placeholder: '',
+    }
+  );
+
+  const [showIconPicker, setShowIconPicker] = useState(false);
+  const [newOption, setNewOption] = useState('');
+
+  const { control, handleSubmit, reset } = useForm();
+
+  // Ajouter une option au select
+  const addOption = () => {
+    if (newOption.trim()) {
+      setCurrentField({
+        ...currentField,
+        options: [...currentField.options, newOption.trim()],
+      });
+      setNewOption('');
+    }
+  };
+
+  // Supprimer une option du select
+  const removeOption = (index) => {
+    const newOptions = currentField.options.filter((_, i) => i !== index);
+    setCurrentField({ ...currentField, options: newOptions });
+  };
+
+  // Sélectionner une icône
+  const selectIcon = (iconName) => {
+    setCurrentField({ ...currentField, icon: iconName });
+
+    // Mettre à jour la valeur dans le formulaire
+    const iconField = control._fields.icon;
+    if (iconField && iconField.onChange) {
+      iconField.onChange(iconName);
+    }
+  };
+
+  const handleFieldSubmit = (data) => {
+    onSubmit(data, currentField, editingIndex);
+    onClose();
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg p-6 max-w-xl w-full mx-4 max-h-[90vh] overflow-y-auto">
+        <div className="flex justify-between items-center mb-4">
+          <h3 className="text-xl font-semibold">
+            {isEditing ? 'Modifier le champ' : 'Ajouter un champ'}
+          </h3>
+          <button
+            onClick={onClose}
+            className="text-gray-500 hover:text-gray-700 text-xl"
+          >
+            ✕
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit(handleFieldSubmit)} className="space-y-4">
+          <Controller
+            name="type"
+            control={control}
+            defaultValue={currentField.type}
+            render={({ field: { onChange, value } }) => (
+              <SelectChoice
+                label="Type de champ"
+                name="type"
+                selected={value}
+                callback={(e) => {
+                  onChange(e.target.value);
+                  setCurrentField({
+                    ...currentField,
+                    type: e.target.value,
+                  });
+                }}
+                choices={FIELD_TYPES}
+                placeHolder="Sélectionner un type"
+                required
+              />
+            )}
+          />
+
+          {![
+            'paragraph',
+            'heading1',
+            'heading2',
+            'heading3',
+            'heading4',
+            'heading5',
+            'heading6',
+          ].includes(currentField.type) && (
+            <>
+              <Controller
+                name="label"
+                control={control}
+                defaultValue={currentField.label}
+                render={({ field: { onChange, value } }) => (
+                  <InputTextIcon
+                    label="Label du champ"
+                    name="label"
+                    value={value}
+                    onChange={(e) => {
+                      onChange(e.target.value);
+                      setCurrentField({
+                        ...currentField,
+                        label: e.target.value,
+                      });
+                    }}
+                    required
+                  />
+                )}
+              />
+
+              <Controller
+                name="placeholder"
+                control={control}
+                defaultValue={currentField.placeholder}
+                render={({ field: { onChange, value } }) => (
+                  <InputTextIcon
+                    label="Placeholder (optionnel)"
+                    name="placeholder"
+                    value={value}
+                    onChange={(e) => {
+                      onChange(e.target.value);
+                      setCurrentField({
+                        ...currentField,
+                        placeholder: e.target.value,
+                      });
+                    }}
+                  />
+                )}
+              />
+
+              <div className="flex items-center">
+                <Controller
+                  name="required"
+                  control={control}
+                  defaultValue={currentField.required}
+                  render={({ field: { onChange, value } }) => (
+                    <input
+                      type="checkbox"
+                      id="required"
+                      checked={value}
+                      onChange={(e) => {
+                        onChange(e.target.checked);
+                        setCurrentField({
+                          ...currentField,
+                          required: e.target.checked,
+                        });
+                      }}
+                      className="mr-2"
+                    />
+                  )}
+                />
+                <label htmlFor="required">Champ obligatoire</label>
+              </div>
+
+              {(currentField.type === 'text' ||
+                currentField.type === 'email' ||
+                currentField.type === 'date') && (
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Icône (optionnel)
+                  </label>
+                  <Controller
+                    name="icon"
+                    control={control}
+                    defaultValue={currentField.icon}
+                    render={({ field: { onChange } }) => (
+                      <div className="flex items-center gap-2">
+                        <div className="flex-1 flex items-center gap-2 p-3 border border-gray-300 rounded-md bg-gray-50">
+                          {currentField.icon &&
+                          LucideIcons[currentField.icon] ? (
+                            <>
+                              {React.createElement(
+                                LucideIcons[currentField.icon],
+                                {
+                                  size: 20,
+                                  className: 'text-gray-600',
+                                }
+                              )}
+                              <span className="text-sm text-gray-700">
+                                {currentField.icon}
+                              </span>
+                            </>
+                          ) : (
+                            <span className="text-sm text-gray-500">
+                              Aucune icône sélectionnée
+                            </span>
+                          )}
+                        </div>
+                        <Button
+                          type="button"
+                          text="Choisir"
+                          onClick={(e) => {
+                            e.preventDefault();
+                            setShowIconPicker(true);
+                          }}
+                          className="px-3 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
+                        />
+                        {currentField.icon && (
+                          <Button
+                            type="button"
+                            text="✕"
+                            onClick={() => {
+                              onChange('');
+                              setCurrentField({ ...currentField, icon: '' });
+                            }}
+                            className="px-2 py-2 bg-red-500 text-white rounded-md hover:bg-red-600"
+                          />
+                        )}
+                      </div>
+                    )}
+                  />
+                </div>
+              )}
+            </>
+          )}
+
+          {[
+            'paragraph',
+            'heading1',
+            'heading2',
+            'heading3',
+            'heading4',
+            'heading5',
+            'heading6',
+          ].includes(currentField.type) && (
+            <Controller
+              name="text"
+              control={control}
+              defaultValue={currentField.text}
+              render={({ field: { onChange, value } }) => (
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    {currentField.type === 'paragraph'
+                      ? 'Texte du paragraphe'
+                      : 'Texte du titre'}
+                  </label>
+                  <textarea
+                    value={value}
+                    onChange={(e) => {
+                      onChange(e.target.value);
+                      setCurrentField({
+                        ...currentField,
+                        text: e.target.value,
+                      });
+                    }}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    rows={3}
+                    required
+                  />
+                </div>
+              )}
+            />
+          )}
+
+          {currentField.type === 'select' && (
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Options de la liste
+              </label>
+              <div className="flex gap-2 mb-2">
+                <input
+                  type="text"
+                  value={newOption}
+                  onChange={(e) => setNewOption(e.target.value)}
+                  placeholder="Nouvelle option"
+                  className="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  onKeyPress={(e) =>
+                    e.key === 'Enter' && (e.preventDefault(), addOption())
+                  }
+                />
+                <Button
+                  type="button"
+                  text="Ajouter"
+                  onClick={addOption}
+                  className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
+                />
+              </div>
+              <div className="space-y-1">
+                {currentField.options.map((option, index) => (
+                  <div
+                    key={index}
+                    className="flex items-center justify-between bg-gray-50 p-2 rounded"
+                  >
+                    <span>{option}</span>
+                    <button
+                      type="button"
+                      onClick={() => removeOption(index)}
+                      className="text-red-500 hover:text-red-700"
+                    >
+                      ✕
+                    </button>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          <div className="flex gap-2 mt-6">
+            <Button
+              type="submit"
+              text={isEditing ? 'Modifier' : 'Ajouter'}
+              className="px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600"
+            />
+            <Button
+              type="button"
+              text="Annuler"
+              onClick={onClose}
+              className="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600"
+            />
+          </div>
+        </form>
+
+        {/* Sélecteur d'icônes - déplacé en dehors du formulaire */}
+        <IconSelector
+          isOpen={showIconPicker}
+          onClose={() => setShowIconPicker(false)}
+          onSelect={selectIcon}
+          selectedIcon={currentField.icon}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/Front-End/src/components/Form/FormRenderer.js b/Front-End/src/components/Form/FormRenderer.js
index 30acdfb..cf73b2f 100644
--- a/Front-End/src/components/Form/FormRenderer.js
+++ b/Front-End/src/components/Form/FormRenderer.js
@@ -101,8 +101,30 @@ export default function FormRenderer({
       </h2>
 
       {formConfig.fields.map((field) => (
-        <div key={field.id} className="flex flex-col mt-4">
-          {field.type === 'paragraph' && <p>{field.text}</p>}
+        <div
+          key={field.id || `field-${Math.random().toString(36).substr(2, 9)}`}
+          className="flex flex-col mt-4"
+        >
+          {field.type === 'heading1' && (
+            <h1 className="text-3xl font-bold mb-3">{field.text}</h1>
+          )}
+          {field.type === 'heading2' && (
+            <h2 className="text-2xl font-bold mb-3">{field.text}</h2>
+          )}
+          {field.type === 'heading3' && (
+            <h3 className="text-xl font-bold mb-2">{field.text}</h3>
+          )}
+          {field.type === 'heading4' && (
+            <h4 className="text-lg font-bold mb-2">{field.text}</h4>
+          )}
+          {field.type === 'heading5' && (
+            <h5 className="text-base font-bold mb-1">{field.text}</h5>
+          )}
+          {field.type === 'heading6' && (
+            <h6 className="text-sm font-bold mb-1">{field.text}</h6>
+          )}
+
+          {field.type === 'paragraph' && <p className="mb-4">{field.text}</p>}
 
           {(field.type === 'text' ||
             field.type === 'email' ||
diff --git a/Front-End/src/components/Form/FormTemplateBuilder.js b/Front-End/src/components/Form/FormTemplateBuilder.js
new file mode 100644
index 0000000..ccee80b
--- /dev/null
+++ b/Front-End/src/components/Form/FormTemplateBuilder.js
@@ -0,0 +1,596 @@
+import React, { useState, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import InputTextIcon from './InputTextIcon';
+import FormRenderer from './FormRenderer';
+import AddFieldModal from './AddFieldModal';
+import { DndProvider, useDrag, useDrop } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import {
+  Edit2,
+  Trash2,
+  PlusCircle,
+  Download,
+  Upload,
+  GripVertical,
+  TextCursorInput,
+  AtSign,
+  Calendar,
+  ChevronDown,
+  Type,
+  AlignLeft,
+  Save,
+  ChevronUp,
+  Heading1,
+  Heading2,
+  Heading3,
+  Heading4,
+  Heading5,
+  Heading6,
+  Code,
+  Eye,
+  EyeOff,
+} from 'lucide-react';
+
+const FIELD_TYPES_ICON = {
+  text: { icon: TextCursorInput },
+  email: { icon: AtSign },
+  date: { icon: Calendar },
+  select: { icon: ChevronDown },
+  textarea: { icon: Type },
+  paragraph: { icon: AlignLeft },
+  heading1: { icon: Heading1 },
+  heading2: { icon: Heading2 },
+  heading3: { icon: Heading3 },
+  heading4: { icon: Heading4 },
+  heading5: { icon: Heading5 },
+  heading6: { icon: Heading6 },
+};
+
+// Type d'item pour le drag and drop
+const ItemTypes = {
+  FIELD: 'field',
+};
+
+// Composant pour un champ draggable
+const DraggableFieldItem = ({
+  field,
+  index,
+  moveField,
+  editField,
+  deleteField,
+}) => {
+  const ref = React.useRef(null);
+
+  // Configuration du drag (ce qu'on peut déplacer)
+  const [{ isDragging }, drag] = useDrag({
+    type: ItemTypes.FIELD,
+    item: { index },
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+
+  // Configuration du drop (où on peut déposer)
+  const [, drop] = useDrop({
+    accept: ItemTypes.FIELD,
+    hover: (item, monitor) => {
+      if (!ref.current) {
+        return;
+      }
+      const dragIndex = item.index;
+      const hoverIndex = index;
+
+      // Ne rien faire si on survole le même élément
+      if (dragIndex === hoverIndex) {
+        return;
+      }
+
+      // Déterminer la position de la souris par rapport à l'élément survolé
+      const hoverBoundingRect = ref.current.getBoundingClientRect();
+      const hoverMiddleY =
+        (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+      const clientOffset = monitor.getClientOffset();
+      const hoverClientY = clientOffset.y - hoverBoundingRect.top;
+
+      // Ne pas remplacer si on n'a pas dépassé la moitié de l'élément
+      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
+        return;
+      }
+      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
+        return;
+      }
+
+      // Effectuer le déplacement
+      moveField(dragIndex, hoverIndex);
+
+      // Mettre à jour l'index de l'élément déplacé
+      item.index = hoverIndex;
+    },
+  });
+
+  // Combiner drag et drop sur le même élément de référence
+  drag(drop(ref));
+
+  return (
+    <div
+      ref={ref}
+      className={`flex items-center justify-between bg-gray-50 p-3 rounded border border-gray-200 ${
+        isDragging ? 'opacity-50' : ''
+      }`}
+    >
+      <div className="flex items-center gap-2">
+        <div className="cursor-move text-gray-400 hover:text-gray-600">
+          <GripVertical size={18} />
+        </div>
+        {FIELD_TYPES_ICON[field.type] &&
+          React.createElement(FIELD_TYPES_ICON[field.type].icon, {
+            size: 18,
+            className: 'text-gray-600',
+          })}
+        <span className="font-medium">
+          {field.type === 'paragraph'
+            ? 'Paragraphe'
+            : field.type.startsWith('heading')
+              ? `Titre ${field.type.replace('heading', '')}`
+              : field.label}
+        </span>
+        <span className="text-sm text-gray-500">
+          ({field.type}){field.required && ' *'}
+        </span>
+      </div>
+      <div className="flex gap-1">
+        <button
+          onClick={() => editField(index)}
+          className="p-1 text-blue-500 hover:text-blue-700"
+          title="Modifier"
+        >
+          <Edit2 size={16} />
+        </button>
+        <button
+          onClick={() => deleteField(index)}
+          className="p-1 text-red-500 hover:text-red-700"
+          title="Supprimer"
+        >
+          <Trash2 size={16} />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default function FormTemplateBuilder() {
+  const [formConfig, setFormConfig] = useState({
+    id: 0,
+    title: 'Nouveau formulaire',
+    submitLabel: 'Envoyer',
+    fields: [],
+  });
+
+  const [showAddFieldModal, setShowAddFieldModal] = useState(false);
+  const [editingIndex, setEditingIndex] = useState(-1);
+  const [saving, setSaving] = useState(false);
+  const [saveMessage, setSaveMessage] = useState({ type: '', text: '' });
+  const [showScrollButton, setShowScrollButton] = useState(false);
+  const [showJsonSection, setShowJsonSection] = useState(false);
+
+  const { reset: resetField } = useForm();
+
+  // Gérer l'affichage du bouton de défilement
+  useEffect(() => {
+    const handleScroll = () => {
+      // Afficher le bouton quand on descend d'au moins 300px
+      setShowScrollButton(window.scrollY > 300);
+    };
+
+    // Ajouter l'écouteur d'événement
+    window.addEventListener('scroll', handleScroll);
+
+    // Nettoyage de l'écouteur lors du démontage du composant
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  // Fonction pour remonter en haut de la page
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  // Générer un ID unique pour les champs
+  const generateFieldId = (label) => {
+    return label
+      .toLowerCase()
+      .replace(/[àáâãäå]/g, 'a')
+      .replace(/[èéêë]/g, 'e')
+      .replace(/[ìíîï]/g, 'i')
+      .replace(/[òóôõö]/g, 'o')
+      .replace(/[ùúûü]/g, 'u')
+      .replace(/[ç]/g, 'c')
+      .replace(/[^a-z0-9]/g, '_')
+      .replace(/_+/g, '_')
+      .replace(/^_|_$/g, '');
+  };
+
+  // Ajouter ou modifier un champ
+  const handleFieldSubmit = (data, currentField, editIndex) => {
+    const isHeadingType = data.type.startsWith('heading');
+    const isContentTypeOnly = data.type === 'paragraph' || isHeadingType;
+
+    const fieldData = {
+      ...data,
+      id: isContentTypeOnly
+        ? undefined
+        : generateFieldId(data.label || 'field'),
+      options: data.type === 'select' ? currentField.options : undefined,
+      icon: data.icon || currentField.icon || undefined,
+      placeholder: data.placeholder || undefined,
+      text: isContentTypeOnly ? data.text : undefined,
+    };
+
+    // Nettoyer les propriétés undefined
+    Object.keys(fieldData).forEach((key) => {
+      if (fieldData[key] === undefined || fieldData[key] === '') {
+        delete fieldData[key];
+      }
+    });
+
+    const newFields = [...formConfig.fields];
+
+    if (editIndex >= 0) {
+      newFields[editIndex] = fieldData;
+    } else {
+      newFields.push(fieldData);
+    }
+
+    setFormConfig({ ...formConfig, fields: newFields });
+    setEditingIndex(-1);
+  };
+
+  // Modifier un champ existant
+  const editField = (index) => {
+    setEditingIndex(index);
+    setShowAddFieldModal(true);
+  };
+
+  // Supprimer un champ
+  const deleteField = (index) => {
+    const newFields = formConfig.fields.filter((_, i) => i !== index);
+    setFormConfig({ ...formConfig, fields: newFields });
+  };
+
+  // Déplacer un champ
+  const moveField = (dragIndex, hoverIndex) => {
+    const newFields = [...formConfig.fields];
+    const draggedField = newFields[dragIndex];
+
+    // Supprimer l'élément déplacé
+    newFields.splice(dragIndex, 1);
+
+    // Insérer l'élément à sa nouvelle position
+    newFields.splice(hoverIndex, 0, draggedField);
+
+    setFormConfig({ ...formConfig, fields: newFields });
+  };
+
+  // Exporter le JSON
+  const exportJson = () => {
+    const jsonString = JSON.stringify(formConfig, null, 2);
+    const blob = new Blob([jsonString], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `formulaire_${formConfig.title.replace(/\s+/g, '_').toLowerCase()}.json`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  // Importer un JSON
+  const importJson = (event) => {
+    const file = event.target.files[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        try {
+          const imported = JSON.parse(e.target.result);
+          setFormConfig(imported);
+        } catch (error) {
+          alert('Erreur lors de l&apos;importation du fichier JSON');
+        }
+      };
+      reader.readAsText(file);
+    }
+  };
+
+  // Sauvegarder le formulaire (pour le backend)
+  const saveFormTemplate = async () => {
+    // Validation basique
+    if (!formConfig.title.trim()) {
+      setSaveMessage({
+        type: 'error',
+        text: 'Le titre du formulaire est requis',
+      });
+      return;
+    }
+
+    if (formConfig.fields.length === 0) {
+      setSaveMessage({
+        type: 'error',
+        text: 'Ajoutez au moins un champ au formulaire',
+      });
+      return;
+    }
+
+    setSaving(true);
+    setSaveMessage({ type: '', text: '' });
+
+    try {
+      // Simulation d'envoi au backend (à remplacer par l'appel API réel)
+      // const response = await fetch('/api/form-templates', {
+      //   method: 'POST',
+      //   headers: {
+      //     'Content-Type': 'application/json',
+      //   },
+      //   body: JSON.stringify(formConfig),
+      // });
+
+      // if (!response.ok) {
+      //   throw new Error('Erreur lors de l\'enregistrement du formulaire');
+      // }
+
+      // const data = await response.json();
+
+      // Simulation d'une réponse du backend
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+
+      setSaveMessage({
+        type: 'success',
+        text: 'Formulaire enregistré avec succès',
+      });
+
+      // Si le backend renvoie un ID, on peut mettre à jour l'ID du formulaire
+      // setFormConfig({ ...formConfig, id: data.id });
+    } catch (error) {
+      setSaveMessage({
+        type: 'error',
+        text:
+          error.message || "Une erreur est survenue lors de l'enregistrement",
+      });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <DndProvider backend={HTML5Backend}>
+      <div className="max-w-6xl mx-auto p-6">
+        <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
+          {/* Panel de configuration */}
+          <div
+            className={
+              showJsonSection
+                ? 'lg:col-span-3 space-y-6'
+                : 'lg:col-span-5 space-y-6'
+            }
+          >
+            <div className="bg-white p-6 rounded-lg shadow">
+              <h2 className="text-xl font-bold mb-6">
+                Configuration du formulaire
+              </h2>
+
+              {/* Configuration générale */}
+              <div className="space-y-4 mb-6">
+                <div className="flex justify-between items-center">
+                  <h3 className="text-lg font-semibold mr-4">
+                    Paramètres généraux
+                  </h3>
+                  <div className="flex gap-2">
+                    <button
+                      onClick={() => setShowJsonSection(!showJsonSection)}
+                      className="px-4 py-2 rounded-md inline-flex items-center gap-2 bg-gray-500 hover:bg-gray-600 text-white"
+                      title={
+                        showJsonSection ? 'Masquer le JSON' : 'Afficher le JSON'
+                      }
+                    >
+                      {showJsonSection ? (
+                        <EyeOff size={18} />
+                      ) : (
+                        <Eye size={18} />
+                      )}
+                      <span>
+                        {showJsonSection ? 'Masquer JSON' : 'Afficher JSON'}
+                      </span>
+                    </button>
+                    <button
+                      onClick={saveFormTemplate}
+                      disabled={saving}
+                      className={`px-4 py-2 rounded-md inline-flex items-center gap-2 ${
+                        saving
+                          ? 'bg-gray-400 cursor-not-allowed'
+                          : 'bg-blue-500 hover:bg-blue-600 text-white'
+                      }`}
+                      title="Enregistrer le formulaire"
+                    >
+                      <Save size={18} />
+                      <span>
+                        {saving ? 'Enregistrement...' : 'Enregistrer'}
+                      </span>
+                    </button>
+                  </div>
+                </div>
+
+                {saveMessage.text && (
+                  <div
+                    className={`p-3 rounded ${
+                      saveMessage.type === 'error'
+                        ? 'bg-red-100 text-red-700'
+                        : 'bg-green-100 text-green-700'
+                    }`}
+                  >
+                    {saveMessage.text}
+                  </div>
+                )}
+
+                <InputTextIcon
+                  label="Titre du formulaire"
+                  name="title"
+                  value={formConfig.title}
+                  onChange={(e) =>
+                    setFormConfig({ ...formConfig, title: e.target.value })
+                  }
+                  required
+                />
+
+                <InputTextIcon
+                  label="Texte du bouton de soumission du formulaire"
+                  name="submitLabel"
+                  value={formConfig.submitLabel}
+                  onChange={(e) =>
+                    setFormConfig({
+                      ...formConfig,
+                      submitLabel: e.target.value,
+                    })
+                  }
+                />
+              </div>
+
+              {/* Liste des champs */}
+              <div className="space-y-4">
+                <div className="flex justify-between items-center">
+                  <h3 className="text-lg font-semibold mr-4">
+                    Champs du formulaire ({formConfig.fields.length})
+                  </h3>
+                  <button
+                    onClick={() => {
+                      setEditingIndex(-1);
+                      setShowAddFieldModal(true);
+                    }}
+                    className="p-2 bg-green-500 text-white rounded-md hover:bg-green-600 transition-colors"
+                    title="Ajouter un champ"
+                  >
+                    <PlusCircle size={18} />
+                  </button>
+                </div>
+
+                {formConfig.fields.length === 0 ? (
+                  <div className="text-center py-8 border-2 border-dashed border-gray-300 rounded-lg">
+                    <p className="text-gray-500 italic mb-4">
+                      Aucun champ ajouté
+                    </p>
+                    <button
+                      onClick={() => {
+                        setEditingIndex(-1);
+                        setShowAddFieldModal(true);
+                      }}
+                      className="px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 transition-colors inline-flex items-center gap-2"
+                    >
+                      <PlusCircle size={18} />
+                      <span>Ajouter mon premier champ</span>
+                    </button>
+                  </div>
+                ) : (
+                  <div className="space-y-2">
+                    {formConfig.fields.map((field, index) => (
+                      <DraggableFieldItem
+                        key={index}
+                        field={field}
+                        index={index}
+                        moveField={moveField}
+                        editField={editField}
+                        deleteField={deleteField}
+                      />
+                    ))}
+                  </div>
+                )}
+              </div>
+
+              {/* Actions */}
+              <div className="mt-6">
+                {/* Les actions ont été déplacées dans la section JSON généré */}
+              </div>
+            </div>
+          </div>
+
+          {/* JSON généré */}
+          {showJsonSection && (
+            <div className="lg:col-span-2">
+              <div className="bg-white p-6 rounded-lg shadow h-full">
+                <div className="flex justify-between items-center mb-4">
+                  <h3 className="text-lg font-semibold mr-4">JSON généré</h3>
+                  <div className="flex gap-2">
+                    <button
+                      onClick={exportJson}
+                      className="p-2 bg-purple-500 text-white rounded-md hover:bg-purple-600 transition-colors"
+                      title="Exporter JSON"
+                    >
+                      <Download size={18} />
+                    </button>
+                    <label
+                      className="p-2 bg-orange-500 text-white rounded-md hover:bg-orange-600 cursor-pointer transition-colors"
+                      title="Importer JSON"
+                    >
+                      <Upload size={18} />
+                      <input
+                        type="file"
+                        accept=".json"
+                        onChange={importJson}
+                        className="hidden"
+                      />
+                    </label>
+                  </div>
+                </div>
+                <pre className="bg-gray-100 p-4 rounded text-sm overflow-auto max-h-96">
+                  {JSON.stringify(formConfig, null, 2)}
+                </pre>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Aperçu */}
+        <div className="mt-6">
+          <div className="bg-white p-6 rounded-lg shadow">
+            <h3 className="text-lg font-semibold mb-4">Aperçu du formulaire</h3>
+            <div className="border-2 border-dashed border-gray-300 p-6 rounded">
+              {formConfig.fields.length > 0 ? (
+                <FormRenderer formConfig={formConfig} />
+              ) : (
+                <p className="text-gray-500 italic text-center">
+                  Ajoutez des champs pour voir l&apos;aperçu
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Modal d'ajout/modification de champ */}
+        <AddFieldModal
+          isOpen={showAddFieldModal}
+          onClose={() => setShowAddFieldModal(false)}
+          onSubmit={handleFieldSubmit}
+          editingField={
+            editingIndex >= 0 ? formConfig.fields[editingIndex] : null
+          }
+          editingIndex={editingIndex}
+        />
+
+        {/* Bouton flottant pour remonter en haut */}
+        {showScrollButton && (
+          <div className="fixed bottom-6 right-6 z-10">
+            <button
+              onClick={scrollToTop}
+              className="p-4 rounded-full shadow-lg flex items-center justify-center bg-gray-500 hover:bg-gray-600 text-white transition-all duration-300"
+              title="Remonter en haut de la page"
+            >
+              <ChevronUp size={24} />
+            </button>
+          </div>
+        )}
+      </div>
+    </DndProvider>
+  );
+}
diff --git a/Front-End/src/components/Form/FormTypes.js b/Front-End/src/components/Form/FormTypes.js
new file mode 100644
index 0000000..6cb6018
--- /dev/null
+++ b/Front-End/src/components/Form/FormTypes.js
@@ -0,0 +1,14 @@
+export const FIELD_TYPES = [
+  { value: 'text', label: 'Texte' },
+  { value: 'email', label: 'Email' },
+  { value: 'date', label: 'Date' },
+  { value: 'select', label: 'Liste déroulante' },
+  { value: 'textarea', label: 'Zone de texte riche' },
+  { value: 'paragraph', label: 'Paragraphe' },
+  { value: 'heading1', label: 'Titre 1' },
+  { value: 'heading2', label: 'Titre 2' },
+  { value: 'heading3', label: 'Titre 3' },
+  { value: 'heading4', label: 'Titre 4' },
+  { value: 'heading5', label: 'Titre 5' },
+  { value: 'heading6', label: 'Titre 6' },
+];
diff --git a/Front-End/src/components/Form/IconSelector.js b/Front-End/src/components/Form/IconSelector.js
new file mode 100644
index 0000000..7952123
--- /dev/null
+++ b/Front-End/src/components/Form/IconSelector.js
@@ -0,0 +1,145 @@
+import React, { useMemo, useState } from 'react';
+import * as LucideIcons from 'lucide-react';
+import Button from './Button';
+
+export default function IconSelector({
+  isOpen,
+  onClose,
+  onSelect,
+  selectedIcon = '',
+}) {
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const excludedKeys = new Set([
+    'Icon',
+    'DynamicIcon',
+    'createLucideIcon',
+    'default',
+    'icons',
+  ]);
+
+  const allIcons = Object.keys(LucideIcons).filter((key) => {
+    // Exclure les utilitaires
+    if (excludedKeys.has(key)) return false;
+    return true;
+  });
+
+  const filteredIcons = useMemo(() => {
+    if (!searchTerm) return allIcons;
+    return allIcons.filter((iconName) =>
+      iconName.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+  }, [searchTerm, allIcons]);
+
+  if (!isOpen) return null;
+
+  const selectIcon = (iconName) => {
+    onSelect(iconName);
+    onClose();
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg p-6 max-w-4xl w-full mx-4 max-h-[85vh] overflow-y-auto">
+        <div className="flex justify-between items-center mb-4">
+          <h3 className="text-lg font-semibold">
+            Choisir une icône ({filteredIcons.length} / {allIcons.length}{' '}
+            icônes)
+          </h3>
+          <button
+            onClick={onClose}
+            className="text-gray-500 hover:text-gray-700 text-xl"
+          >
+            ✕
+          </button>
+        </div>
+
+        {/* Barre de recherche */}
+        <div className="mb-6">
+          <div className="relative">
+            <input
+              type="text"
+              placeholder="Rechercher une icône..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="w-full px-4 py-3 pl-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            />
+            <LucideIcons.Search
+              className="absolute left-3 top-3.5 text-gray-400"
+              size={18}
+            />
+            {searchTerm && (
+              <button
+                onClick={() => setSearchTerm('')}
+                className="absolute right-3 top-3.5 text-gray-400 hover:text-gray-600"
+              >
+                <LucideIcons.X size={18} />
+              </button>
+            )}
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
+          {filteredIcons.map((iconName) => {
+            try {
+              const IconComponent = LucideIcons[iconName];
+              return (
+                <button
+                  key={iconName}
+                  onClick={() => selectIcon(iconName)}
+                  className={`
+                    p-5 rounded-lg border-2 transition-all duration-200
+                    hover:bg-blue-50 hover:border-blue-300 hover:shadow-md hover:scale-105
+                    flex flex-col items-center justify-center gap-4 min-h-[140px] w-full
+                    ${
+                      selectedIcon === iconName
+                        ? 'bg-blue-100 border-blue-500 shadow-md scale-105'
+                        : 'bg-gray-50 border-gray-200'
+                    }
+                  `}
+                  title={iconName}
+                >
+                  <IconComponent
+                    size={32}
+                    className="text-gray-700 flex-shrink-0"
+                  />
+                  <span className="text-xs text-gray-600 text-center leading-tight break-words px-1 overflow-hidden max-w-full">
+                    {iconName}
+                  </span>
+                </button>
+              );
+            } catch (error) {
+              // En cas d'erreur avec une icône spécifique, ne pas la rendre
+              return null;
+            }
+          })}
+        </div>
+
+        <div className="mt-6 flex justify-between items-center">
+          <p className="text-sm text-gray-500">
+            {searchTerm ? (
+              <>
+                {filteredIcons.length} icône(s) trouvée(s) sur {allIcons.length}{' '}
+                disponibles
+              </>
+            ) : (
+              <>Total : {allIcons.length} icônes disponibles</>
+            )}
+          </p>
+          <div className="flex gap-2">
+            <Button
+              text="Aucune icône"
+              onClick={() => selectIcon('')}
+              className="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600"
+            />
+            <Button
+              text="Annuler"
+              onClick={onClose}
+              className="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/docs/manuels/installation/premier-pas.md b/docs/manuels/installation/premier-pas.md
new file mode 100644
index 0000000..c739432
--- /dev/null
+++ b/docs/manuels/installation/premier-pas.md
@@ -0,0 +1,94 @@
+# 🧭 Premiers Pas avec N3WT-SCHOOL
+
+Bienvenue dans **N3WT-SCHOOL** !
+Ce guide rapide vous accompagnera dans les premières étapes de configuration de votre instance afin de la rendre pleinement opérationnelle pour votre établissement.
+
+## ✅ Étapes à suivre :
+
+1. **Configurer la signature électronique des documents via Docuseal**
+2. **Activer l'envoi d'e-mails depuis la plateforme**
+
+---
+
+## ✍️ 1. Configuration de la signature électronique (Docuseal)
+
+Afin de permettre la signature électronique des documents administratifs (inscriptions, conventions, etc.), N3WT-SCHOOL s'appuie sur [**Docuseal**](https://docuseal.com), un service sécurisé de signature électronique.
+
+### Étapes :
+
+1. Connectez-vous ou créez un compte sur Docuseal :
+   👉 [https://docuseal.com/sign_in](https://docuseal.com/sign_in)
+
+2. Une fois connecté, accédez à la section API :
+   👉 [https://console.docuseal.com/api](https://console.docuseal.com/api)
+
+3. Copiez votre **X-Auth-Token** personnel.
+   Ce jeton permettra à N3WT-SCHOOL de se connecter à votre compte Docuseal.
+
+4. **Envoyez votre X-Auth-Token à l'équipe N3WT-SCHOOL** pour qu'un administrateur puisse finaliser la configuration :
+   ✉️ Contact : [contact@n3wtschool.com](mailto:contact@n3wtschool.com)
+
+> ⚠️ Cette opération doit impérativement être réalisée par un administrateur N3WT-SCHOOL.
+> Ne partagez pas ce token en dehors de ce cadre.
+
+---
+
+## 📧 2. Configuration de l'envoi d’e-mails
+
+L’envoi de mails depuis N3WT-SCHOOL est requis pour :
+
+- Notifications aux étudiants
+- Accusés de réception
+- Envoi de documents (factures, conventions…)
+
+Vous devrez renseigner les informations de votre fournisseur SMTP dans **Paramètres > E-mail** de l’application.
+
+### Informations requises :
+
+- Hôte SMTP
+- Port SMTP
+- Type de sécurité (TLS / SSL)
+- Adresse e-mail (utilisateur SMTP)
+- Mot de passe ou **mot de passe applicatif**
+
+---
+
+## 🔐 Mot de passe applicatif (Gmail, Outlook, etc.)
+
+Certains fournisseurs (notamment **Gmail**, **Yahoo**, **iCloud**) ne permettent pas d’utiliser directement votre mot de passe personnel pour des applications tierces.
+Vous devez créer un **mot de passe applicatif**.
+
+### Exemple : Créer un mot de passe applicatif avec Gmail
+
+1. Connectez-vous à [votre compte Google](https://myaccount.google.com)
+2. Allez dans **Sécurité > Validation en 2 étapes**
+3. Activez la validation en 2 étapes si ce n’est pas déjà fait
+4. Ensuite, allez dans **Mots de passe des applications**
+5. Sélectionnez une application (ex. : "Autre (personnalisée)") et nommez-la "N3WT-SCHOOL"
+6. Copiez le mot de passe généré et utilisez-le comme **mot de passe SMTP**
+
+> 📎 Vous pouvez consulter l’aide officielle de Google ici :
+> [Créer un mot de passe d’application – Google](https://support.google.com/accounts/answer/185833)
+
+---
+
+## 🗂️ Configuration SMTP — Fournisseurs courants
+
+| Fournisseur       | SMTP Host           | Port TLS | Port SSL | Sécurité | Lien aide SMTP                                                               |
+| ----------------- | ------------------- | -------- | -------- | -------- | ---------------------------------------------------------------------------- |
+| Gmail             | smtp.gmail.com      | 587      | 465      | TLS/SSL  | [Aide SMTP Gmail](https://support.google.com/mail/answer/7126229?hl=fr)      |
+| Outlook / Hotmail | smtp.office365.com  | 587      | —        | TLS      | [Aide SMTP Outlook](https://support.microsoft.com/fr-fr/office)              |
+| Yahoo Mail        | smtp.mail.yahoo.com | 587      | 465      | TLS/SSL  | [Aide SMTP Yahoo](https://help.yahoo.com/kb/SLN4724.html)                    |
+| iCloud Mail       | smtp.mail.me.com    | 587      | 465      | TLS/SSL  | [Aide iCloud SMTP](https://support.apple.com/fr-fr/HT202304)                 |
+| OVH               | ssl0.ovh.net        | 587      | 465      | TLS/SSL  | [Aide OVH SMTP](https://help.ovhcloud.com/csm/fr-email-general-settings)     |
+| Infomaniak        | mail.infomaniak.com | 587      | 465      | TLS/SSL  | [Aide SMTP Infomaniak](https://www.infomaniak.com/fr/support/faq/1817)       |
+| Gandi             | mail.gandi.net      | 587      | 465      | TLS/SSL  | [Aide SMTP Gandi](https://docs.gandi.net/fr/mail/faq/envoyer_des_mails.html) |
+
+> 📝 Si votre fournisseur ne figure pas dans cette liste, n'hésitez pas à contacter votre fournisseur de mail pour obtenir ces informations.
+
+---
+
+## 🎉 Vous êtes prêt·e !
+
+Une fois ces deux configurations effectuées, votre instance N3WT-SCHOOL est prête à fonctionner pleinement.
+Vous pourrez ensuite ajouter vos formations, étudiants, documents et automatiser toute votre gestion scolaire.