feat: Evolution des modèles pour intégrer un planning et du m2m

Front-End/src/components/CheckBoxList.js

@@ -0,0 +1,43 @@
+const CheckBoxList = ({ items, formData, handleChange, fieldName, label, icon: Icon, className, itemLabelFunc = (item) => item.name }) => {
+    const handleCheckboxChange = (e) => {
+      handleChange(e);
+    };
+  
+    return (
+      <div className={`mb-4 ${className}`}>
+        <label className="block text-sm font-medium text-gray-700 flex items-center">
+          {Icon && <Icon className="w-5 h-5 mr-2" />}
+          {label}
+        </label>
+        <div className="mt-2 grid grid-cols-1 gap-4">
+          {items.map(item => (
+            <div key={item.id} className="flex items-center">
+              <input
+                type="checkbox"
+                id={`${fieldName}-${item.id}`}
+                name={fieldName}
+                value={item.id}
+                checked={formData[fieldName].includes(item.id)}
+                onChange={handleCheckboxChange}
+                className="form-checkbox h-4 w-4 rounded-md text-emerald-600 hover:ring-emerald-400 checked:bg-emerald-600 hover:border-emerald-500 hover:bg-emerald-500 cursor-pointer"
+                style={{ borderRadius: '6px', outline: 'none', boxShadow: 'none' }} // Remove focus styles
+              />
+              <label htmlFor={`${fieldName}-${item.id}`} className="ml-2 block text-sm text-gray-900 flex items-center">
+                {itemLabelFunc(item)}
+                {item.codeCouleur && (
+                  <div
+                    className="w-4 h-4 rounded-full ml-2 hover:bg-opacity-70 transition duration-200 ease-in-out"
+                    style={{ backgroundColor: item.codeCouleur }}
+                    title={item.codeCouleur}
+                  ></div>
+                )}
+              </label>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  };
+  
+  export default CheckBoxList;
+