feat: Changement du rendu de la page des documents + gestion des

formulaires d'école déjà existants [N3WTS-17]

Front-End/src/components/SectionHeaderDocument.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import { Plus } from 'lucide-react';
+
+// Thèmes couleur selon le type
+const THEME = {
+  groupe: {
+    bg: 'bg-blue-50',
+    border: 'border-blue-200',
+    iconBg: 'bg-blue-100',
+    icon: 'text-blue-600',
+    title: 'text-blue-800',
+    desc: 'text-blue-600',
+    button: 'bg-blue-500 text-white hover:bg-blue-600',
+    buttonText: 'text-blue-700',
+    buttonHover: 'hover:bg-blue-100',
+  },
+  formulaire: {
+    bg: 'bg-emerald-50',
+    border: 'border-emerald-200',
+    iconBg: 'bg-emerald-100',
+    icon: 'text-emerald-600',
+    title: 'text-emerald-800',
+    desc: 'text-emerald-600',
+    button: 'bg-emerald-500 text-white hover:bg-emerald-600',
+    buttonText: 'text-emerald-700',
+    buttonHover: 'hover:bg-emerald-100',
+  },
+  parent: {
+    bg: 'bg-orange-50',
+    border: 'border-orange-200',
+    iconBg: 'bg-orange-100',
+    icon: 'text-orange-500',
+    title: 'text-orange-700',
+    desc: 'text-orange-600',
+    button: 'bg-orange-500 text-white hover:bg-orange-600',
+    buttonText: 'text-orange-700',
+    buttonHover: 'hover:bg-orange-100',
+  },
+};
+
+const SectionHeaderDocument = ({
+  icon: Icon,
+  title,
+  description,
+  button = false,
+  buttonOpeningModal = false,
+  onClick = null,
+  className = '',
+  type = 'groupe', // 'groupe', 'formulaire', 'parent'
+}) => {
+  const theme = THEME[type] || THEME.groupe;
+
+  return (
+    <div className={`flex items-center justify-between border-b ${theme.border} ${theme.bg} px-2 py-3 mb-4 ${className}`}>
+      <div className="flex items-center gap-3">
+        {Icon && (
+          <span className={`${theme.iconBg} p-2 rounded-md flex items-center justify-center`}>
+            <Icon className={`w-6 h-6 ${theme.icon}`} />
+          </span>
+        )}
+        <div>
+          <h2 className={`text-lg font-semibold ${theme.title}`}>{title}</h2>
+          {description && (
+            <p className={`text-xs ${theme.desc}`}>{description}</p>
+          )}
+        </div>
+      </div>
+      {button && onClick && (
+        <button
+          onClick={onClick}
+          className={
+            buttonOpeningModal
+              ? `flex items-center ${theme.button} px-3 py-1 rounded-md shadow transition`
+              : `flex items-center ${theme.buttonText} ${theme.buttonHover} px-2 py-1 rounded-md`
+          }
+        >
+          <Plus className="w-5 h-5 mr-1" />
+          <span className="text-sm font-medium">Ajouter</span>
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default SectionHeaderDocument;