feat: Précablage du formulaire dynamique [N3WTS-17]

Front-End/src/components/AutoSaveIndicator.js

@@ -0,0 +1,63 @@
+'use client';
+import React from 'react';
+import { CheckCircle } from 'lucide-react';
+
+/**
+ * Composant indicateur de sauvegarde automatique
+ * @param {Boolean} isSaving - Si la sauvegarde est en cours
+ * @param {Date} lastSaved - Date de la dernière sauvegarde
+ * @param {Boolean} autoSaveEnabled - Si l'auto-save est activée
+ * @param {Function} onToggleAutoSave - Callback pour activer/désactiver l'auto-save
+ */
+export default function AutoSaveIndicator({
+  isSaving = false,
+  lastSaved = null,
+  autoSaveEnabled = true,
+  onToggleAutoSave = null,
+}) {
+  if (!autoSaveEnabled && !lastSaved && !isSaving) {
+    return null;
+  }
+
+  return (
+    <div className="flex justify-between items-center py-2 px-4 bg-gray-50 rounded-lg border border-gray-200">
+      <div className="flex items-center space-x-2">
+        {isSaving ? (
+          <>
+            <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-600"></div>
+            <span className="text-sm text-blue-600 font-medium">
+              Sauvegarde en cours...
+            </span>
+          </>
+        ) : lastSaved ? (
+          <>
+            <CheckCircle className="h-4 w-4 text-green-600" />
+            <span className="text-sm text-green-600">
+              Sauvegardé à {lastSaved.toLocaleTimeString()}
+            </span>
+          </>
+        ) : (
+          <span className="text-sm text-gray-500">Auto-sauvegarde activée</span>
+        )}
+      </div>
+
+      {onToggleAutoSave && (
+        <button
+          onClick={onToggleAutoSave}
+          className={`text-xs px-3 py-1 rounded-full font-medium transition-colors ${
+            autoSaveEnabled
+              ? 'bg-green-100 text-green-700 hover:bg-green-200'
+              : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+          }`}
+          title={
+            autoSaveEnabled
+              ? 'Désactiver la sauvegarde automatique'
+              : 'Activer la sauvegarde automatique'
+          }
+        >
+          {autoSaveEnabled ? '✓ Auto-save' : '○ Auto-save'}
+        </button>
+      )}
+    </div>
+  );
+}