feat: Pre cablage du dashboard [#]

Front-End/src/components/Popup.js

@@ -4,21 +4,41 @@ import ReactDOM from 'react-dom';
 const Popup = ({ visible, message, onConfirm, onCancel, uniqueConfirmButton = false }) => {
   if (!visible) return null;
 
-  // Diviser le message en lignes
-  const messageLines = message.split('\n');
+  // Vérifier si le message est une chaîne de caractères
+  const isStringMessage = typeof message === 'string';
+  // Diviser le message en lignes seulement si c'est une chaîne
+  const messageLines = isStringMessage ? message.split('\n') : null;
 
   return ReactDOM.createPortal(
     <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
-      <div className="bg-white p-6 rounded-md shadow-md">
-        {messageLines.map((line, index) => (
-          <p key={index} className="mb-4">{line}</p>
-        ))}
-        <div className={`flex ${uniqueConfirmButton ? 'justify-center' : 'justify-end'} gap-4`}>
-          {!uniqueConfirmButton && (
-            <button className="px-4 py-2 bg-gray-200 rounded-md" onClick={onCancel}>Annuler</button>
+      <div className="bg-white p-6 rounded-lg shadow-xl max-w-md w-full">
+        <div className="mb-4">
+          {isStringMessage ? (
+            // Afficher le message sous forme de lignes si c'est une chaîne
+            messageLines.map((line, index) => (
+              <p key={index} className="text-gray-700">
+                {line}
+              </p>
+            ))
+          ) : (
+            // Sinon, afficher directement le contenu React
+            message
           )}
-          <button className="px-4 py-2 bg-emerald-500 text-white rounded-md" onClick={onConfirm}>
-            {uniqueConfirmButton ? 'Compris !' : 'Confirmer'}
+        </div>
+        <div className="flex justify-end space-x-2">
+          {!uniqueConfirmButton && (
+            <button
+              className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+              onClick={onCancel}
+            >
+              Annuler
+            </button>
+          )}
+          <button
+            className="px-4 py-2 bg-emerald-500 text-white rounded hover:bg-emerald-600"
+            onClick={onConfirm}
+          >
+            {uniqueConfirmButton ? 'Fermer' : 'Confirmer'}
           </button>
         </div>
       </div>