@portnet/ui 5.0.12 → 5.0.14

package/dist/components/widgets/PuiHelpWidget.js

@@ -0,0 +1,3633 @@
+"use strict";
+
+require("core-js/modules/esnext.iterator.for-each.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.array-buffer.constructor.js");
+require("core-js/modules/es.array-buffer.slice.js");
+require("core-js/modules/es.promise.js");
+require("core-js/modules/es.string.includes.js");
+require("core-js/modules/es.string.trim.js");
+require("core-js/modules/es.typed-array.uint8-array.js");
+require("core-js/modules/es.typed-array.fill.js");
+require("core-js/modules/es.typed-array.set.js");
+require("core-js/modules/es.typed-array.sort.js");
+require("core-js/modules/es.typed-array.to-locale-string.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/web.url.js");
+require("core-js/modules/web.url.to-json.js");
+require("core-js/modules/web.url-search-params.js");
+var _react = require("react");
+var _reactRedux = require("react-redux");
+var _reactQuery = require("react-query");
+var _reactFontawesome = require("@fortawesome/react-fontawesome");
+var _reactToastify = require("react-toastify");
+var _reactstrap = require("reactstrap");
+var _freeRegularSvgIcons = require("@fortawesome/free-regular-svg-icons");
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+var _iconsMaterial = require("@mui/icons-material");
+var _material = require("@mui/material");
+require("../../styles/help-widget.css");
+require("../../styles/ReclamationFormModal.css");
+var _useReclamation = require("../../hooks/useReclamation");
+var _guides = _interopRequireDefault(require("../../assets/guides"));
+var _PuiHelpWidgetContext = require("../common/PuiHelpWidgetContext");
+var _tijariaLogo = _interopRequireDefault(require("../../assets/images/tijariaLogo.ico"));
+var _GuideImage = require("./GuideImage");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+const WIDGET_FONT = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
+const ContentPanel = _ref => {
+  let {
+    isOpen,
+    onClose,
+    contentData,
+    title = "Contenu",
+    showDownloadButton = false,
+    showExternalLinkLabel = false,
+    onDownload = null,
+    loadingDownload = false,
+    projectCode = null,
+    externalLinkUrl = null,
+    guideBaseUrl
+  } = _ref;
+  const {
+    guideImageService
+  } = (0, _PuiHelpWidgetContext.useHelpWidget)();
+  const [position, setPosition] = (0, _react.useState)({
+    x: window.innerWidth - 380,
+    y: 40
+  });
+  const [isDragging, setIsDragging] = (0, _react.useState)(false);
+  const [dragStart, setDragStart] = (0, _react.useState)({
+    x: 0,
+    y: 0
+  });
+  const panelRef = (0, _react.useRef)(null);
+  const firstFocusableRef = (0, _react.useRef)(null);
+  const previousActiveElement = (0, _react.useRef)(null);
+  const [currentView, setCurrentView] = (0, _react.useState)("list");
+  const [selectedSection, setSelectedSection] = (0, _react.useState)(null);
+  const [fullscreenImage, setFullscreenImage] = (0, _react.useState)(null);
+  const PANEL_WIDTH = 340;
+  const PANEL_MAX_HEIGHT = 550;
+  const RESIZE_MARGIN = 40;
+  const MIN_VISIBLE_WIDTH = 80;
+  (0, _react.useEffect)(() => {
+    if (contentData) {
+      setCurrentView("list");
+      setSelectedSection(null);
+    }
+  }, [contentData]);
+  (0, _react.useEffect)(() => {
+    return () => {
+      guideImageService.clearImageCache();
+    };
+  }, []);
+  const handleSectionClick = section => {
+    setSelectedSection(section);
+    setCurrentView("detail");
+  };
+  const handleBack = () => {
+    setCurrentView("list");
+    setSelectedSection(null);
+  };
+  const handleOpenInNewWindow = () => {
+    if (!selectedSection || !projectCode || !guideBaseUrl) return;
+    const url = "".concat(guideBaseUrl, "/#/guide/").concat(projectCode, "?section=").concat(selectedSection.id);
+    window.open(url, "_blank");
+  };
+  const handleImageClick = imageSrc => {
+    setFullscreenImage(imageSrc);
+  };
+  const handleCloseFullscreen = () => {
+    setFullscreenImage(null);
+  };
+  const handleMouseDown = e => {
+    if (e.target.closest(".drag-handle")) {
+      setIsDragging(true);
+      setDragStart({
+        x: e.clientX - position.x,
+        y: e.clientY - position.y
+      });
+    }
+  };
+  const handleMouseMove = e => {
+    if (isDragging) {
+      const newX = e.clientX - dragStart.x;
+      const newY = e.clientY - dragStart.y;
+      const constrainedX = Math.max(0, newX);
+      const maxX = window.innerWidth - MIN_VISIBLE_WIDTH;
+      const finalX = Math.min(constrainedX, maxX);
+      const finalY = Math.max(0, newY);
+      setPosition({
+        x: finalX,
+        y: finalY
+      });
+    }
+  };
+  const handleMouseUp = () => {
+    setIsDragging(false);
+  };
+  (0, _react.useEffect)(() => {
+    const handleResize = () => {
+      setPosition(prev => {
+        var _panelRef$current;
+        const panelHeight = ((_panelRef$current = panelRef.current) === null || _panelRef$current === void 0 ? void 0 : _panelRef$current.offsetHeight) || PANEL_MAX_HEIGHT;
+        let newX = prev.x;
+        let newY = prev.y;
+        const maxX = window.innerWidth - PANEL_WIDTH - RESIZE_MARGIN;
+        const maxY = window.innerHeight - panelHeight - RESIZE_MARGIN;
+        if (prev.x + PANEL_WIDTH > window.innerWidth - RESIZE_MARGIN) {
+          newX = Math.max(RESIZE_MARGIN, maxX);
+        }
+        if (prev.x < RESIZE_MARGIN) {
+          newX = RESIZE_MARGIN;
+        }
+        if (prev.y + panelHeight > window.innerHeight - RESIZE_MARGIN) {
+          newY = Math.max(RESIZE_MARGIN, maxY);
+        }
+        if (prev.y < RESIZE_MARGIN) {
+          newY = RESIZE_MARGIN;
+        }
+        return {
+          x: newX,
+          y: newY
+        };
+      });
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (isDragging) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      return () => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+    }
+  }, [isDragging, dragStart]);
+  (0, _react.useEffect)(() => {
+    const handleEscape = e => {
+      if (e.key === "Escape" && fullscreenImage) {
+        handleCloseFullscreen();
+      }
+    };
+    window.addEventListener("keydown", handleEscape);
+    return () => window.removeEventListener("keydown", handleEscape);
+  }, [fullscreenImage]);
+  (0, _react.useEffect)(() => {
+    if (isOpen) {
+      previousActiveElement.current = document.activeElement;
+      setTimeout(() => {
+        var _firstFocusableRef$cu;
+        (_firstFocusableRef$cu = firstFocusableRef.current) === null || _firstFocusableRef$cu === void 0 || _firstFocusableRef$cu.focus();
+      }, 100);
+    } else {
+      if (previousActiveElement.current) {
+        previousActiveElement.current.focus();
+      }
+    }
+  }, [isOpen]);
+  (0, _react.useEffect)(() => {
+    if (!isOpen) return;
+    const handleKeyDown = e => {
+      if (e.key === "Escape") {
+        if (fullscreenImage) {
+          return;
+        }
+        onClose();
+        return;
+      }
+      if (e.key === "Tab") {
+        const panel = panelRef.current;
+        if (!panel) return;
+        const focusableElements = panel.querySelectorAll('button:not([disabled]), [href]:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled])');
+        const focusableArray = Array.from(focusableElements);
+        const firstElement = focusableArray[0];
+        const lastElement = focusableArray[focusableArray.length - 1];
+        if (focusableArray.length === 0) return;
+        if (e.shiftKey) {
+          if (document.activeElement === firstElement) {
+            lastElement.focus();
+            e.preventDefault();
+          }
+        } else {
+          if (document.activeElement === lastElement) {
+            firstElement.focus();
+            e.preventDefault();
+          }
+        }
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, onClose, fullscreenImage]);
+  (0, _react.useEffect)(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isOpen]);
+  (0, _react.useEffect)(() => {
+    if (currentView === "detail") {
+      setTimeout(() => {
+        const panel = panelRef.current;
+        if (!panel) return;
+        const focusableElements = panel.querySelectorAll('button:not([disabled]), [href]:not([disabled]), [role="button"]:not([disabled])[tabindex="0"]');
+        if (focusableElements.length > 0) {
+          focusableElements[0].focus();
+        }
+      }, 100);
+    } else if (currentView === "list") {
+      setTimeout(() => {
+        var _firstFocusableRef$cu2;
+        (_firstFocusableRef$cu2 = firstFocusableRef.current) === null || _firstFocusableRef$cu2 === void 0 || _firstFocusableRef$cu2.focus();
+      }, 100);
+    }
+  }, [currentView]);
+  if (!isOpen) return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      ref: panelRef,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": "panel-title",
+      style: {
+        position: "fixed",
+        left: "".concat(position.x, "px"),
+        top: "".concat(position.y, "px"),
+        width: "360px",
+        height: "auto",
+        maxHeight: "550px",
+        backgroundColor: "white",
+        border: "0px solid #dadce0",
+        borderRadius: "16px",
+        boxShadow: "0px 1px 3px 0px rgba(60, 64, 67, 0.3)",
+        zIndex: 10000000,
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+        fontFamily: "'Google Sans', Roboto, Arial, sans-serif"
+      },
+      onMouseDown: handleMouseDown,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "drag-handle",
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          marginTop: "10px",
+          padding: "16px 20px",
+          cursor: "move",
+          userSelect: "none",
+          backgroundColor: "white",
+          position: "relative"
+        },
+        children: [currentView === "detail" && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          onClick: handleBack,
+          "aria-label": "Retour \xE0 la liste",
+          tabIndex: 0,
+          style: {
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            padding: "8px",
+            borderRadius: "50%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            transition: "background-color 0.2s",
+            position: "absolute",
+            left: "12px",
+            order: 1
+          },
+          onMouseEnter: e => e.currentTarget.style.backgroundColor = "#f1f3f4",
+          onMouseLeave: e => e.currentTarget.style.backgroundColor = "transparent",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "22",
+            height: "22",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "#5f6368",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+              d: "M19 12H5M12 19l-7-7 7-7"
+            })
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+          id: "panel-title",
+          style: {
+            margin: 0,
+            fontSize: "20px",
+            fontWeight: "400",
+            color: "#202124",
+            letterSpacing: "0",
+            order: 2
+          },
+          children: title
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          ref: firstFocusableRef,
+          onClick: onClose,
+          "aria-label": "Fermer le panneau",
+          tabIndex: 0,
+          style: {
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            padding: "8px",
+            borderRadius: "50%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            transition: "background-color 0.2s",
+            position: "absolute",
+            right: "12px",
+            order: 3
+          },
+          onMouseEnter: e => e.currentTarget.style.backgroundColor = "#f1f3f4",
+          onMouseLeave: e => e.currentTarget.style.backgroundColor = "transparent",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "22",
+            height: "22",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "#5f6368",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
+              x1: "18",
+              y1: "6",
+              x2: "6",
+              y2: "18"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
+              x1: "6",
+              y1: "6",
+              x2: "18",
+              y2: "18"
+            })]
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          padding: "10px 16px",
+          marginBottom: "7px",
+          overflowY: "auto",
+          flex: 1
+        },
+        children: currentView === "list" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+          children: !contentData ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            style: {
+              textAlign: "center",
+              padding: "20px",
+              marginBottom: 9
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {
+              size: 20,
+              sx: {
+                color: "#1967d2"
+              }
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              component: "div",
+              sx: {
+                fontSize: "14px",
+                color: "#202124",
+                marginTop: "10px",
+                lineHeight: "normal"
+              },
+              children: "Chargement..."
+            })]
+          }) : contentData !== null && contentData !== void 0 && contentData.sections && contentData.sections.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [contentData.name && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              style: {
+                marginBottom: "7px"
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+                style: {
+                  fontSize: "16px",
+                  color: "#202124",
+                  lineHeight: "24px",
+                  margin: 0,
+                  fontWeight: "400"
+                },
+                children: contentData.name
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                gap: "4px"
+              },
+              children: contentData.sections.map(section => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                onClick: () => handleSectionClick(section),
+                onKeyDown: e => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    handleSectionClick(section);
+                  }
+                },
+                role: "button",
+                tabIndex: 0,
+                "aria-label": "Ouvrir ".concat(section.title),
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  padding: "12px 2.2px",
+                  cursor: "pointer",
+                  borderRadius: "8px",
+                  transition: "background-color 0.2s",
+                  backgroundColor: "transparent"
+                },
+                onMouseEnter: e => {
+                  e.currentTarget.style.backgroundColor = "#f1f3f4";
+                },
+                onMouseLeave: e => {
+                  e.currentTarget.style.backgroundColor = "transparent";
+                },
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  style: {
+                    minWidth: "34px",
+                    height: "34px",
+                    borderRadius: "50%",
+                    backgroundColor: "#e8f0fe",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    marginRight: "12px",
+                    flexShrink: 0
+                  },
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "#1967d2",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+                      d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("polyline", {
+                      points: "14 2 14 8 20 8"
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
+                      x1: "16",
+                      y1: "13",
+                      x2: "8",
+                      y2: "13"
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
+                      x1: "16",
+                      y1: "17",
+                      x2: "8",
+                      y2: "17"
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
+                      x1: "10",
+                      y1: "9",
+                      x2: "8",
+                      y2: "9"
+                    })]
+                  })
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  style: {
+                    flex: 1
+                  },
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                    style: {
+                      fontSize: "16px",
+                      color: "#202124",
+                      fontWeight: "400",
+                      lineHeight: "20px"
+                    },
+                    children: section.title
+                  })
+                })]
+              }, section.id))
+            }), showDownloadButton && onDownload && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              style: {
+                marginTop: "10px"
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                onClick: onDownload,
+                onKeyDown: e => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    onDownload();
+                  }
+                },
+                role: "button",
+                tabIndex: 0,
+                "aria-label": "T\xE9l\xE9charger le guide complet",
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: "6px",
+                  color: "#1967d2",
+                  fontSize: "14px",
+                  textDecoration: "none",
+                  padding: "8px",
+                  borderRadius: "4px",
+                  transition: "background-color 0.2s",
+                  cursor: loadingDownload ? "not-allowed" : "pointer",
+                  opacity: loadingDownload ? 0.6 : 1
+                },
+                onMouseEnter: e => !loadingDownload && (e.currentTarget.style.backgroundColor = "#f1f3f4"),
+                onMouseLeave: e => e.currentTarget.style.backgroundColor = "transparent",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  children: "T\xE9l\xE9charger le guide complet"
+                }), loadingDownload ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {
+                  size: 16,
+                  sx: {
+                    color: "#1967d2"
+                  }
+                }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+                    d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("polyline", {
+                    points: "7 10 12 15 17 10"
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
+                    x1: "12",
+                    y1: "15",
+                    x2: "12",
+                    y2: "3"
+                  })]
+                })]
+              })
+            }), showExternalLinkLabel && externalLinkUrl && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              style: {
+                marginTop: "10px"
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                onClick: () => window.open(externalLinkUrl, "_blank"),
+                onKeyDown: e => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    window.open(externalLinkUrl, "_blank");
+                  }
+                },
+                role: "button",
+                tabIndex: 0,
+                "aria-label": "Voir plus de d\xE9tails (ouvre dans un nouvel onglet)",
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: "6px",
+                  color: "#1967d2",
+                  fontSize: "14px",
+                  textDecoration: "none",
+                  padding: "8px",
+                  borderRadius: "4px",
+                  transition: "background-color 0.2s",
+                  cursor: "pointer"
+                },
+                onMouseEnter: e => e.currentTarget.style.backgroundColor = "#f1f3f4",
+                onMouseLeave: e => e.currentTarget.style.backgroundColor = "transparent",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  children: "Voir plus de d\xE9tails"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+                    d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("polyline", {
+                    points: "15 3 21 3 21 9"
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
+                    x1: "21",
+                    y1: "3",
+                    x2: "10",
+                    y2: "14"
+                  })]
+                })]
+              })
+            })]
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            style: {
+              textAlign: "center",
+              padding: "50px 20px",
+              color: "#202124"
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              component: "div",
+              sx: {
+                fontSize: "14px",
+                lineHeight: "normal",
+                color: "#202124"
+              },
+              children: "Aucune section disponible."
+            })
+          })
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+          children: selectedSection && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              style: {
+                marginBottom: "14px",
+                marginTop: "4px"
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+                style: {
+                  fontSize: "28px",
+                  color: "#202124",
+                  fontWeight: "400",
+                  lineHeight: "32px",
+                  margin: 0
+                },
+                children: selectedSection.title
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              style: {
+                marginBottom: "20px"
+              },
+              children: selectedSection.paragraphs && selectedSection.paragraphs.map((paragraph, index) => {
+                const text = typeof paragraph === "string" ? paragraph : paragraph.text;
+                const isQuestion = typeof paragraph === "object" && paragraph.isQuestion;
+                return /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+                  style: {
+                    fontSize: "16px",
+                    color: "#202124",
+                    lineHeight: "22px",
+                    margin: index === 0 ? 0 : "12px 0 0 0",
+                    fontWeight: isQuestion ? "600" : "400"
+                  },
+                  children: text
+                }, index);
+              })
+            }), selectedSection.images && selectedSection.images.length > 0 && projectCode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GuideImage.GuideImageGallery, {
+              projectCode: projectCode,
+              imageOrders: selectedSection.images,
+              columns: 1,
+              onImageClick: handleImageClick
+            }), selectedSection.keywords && selectedSection.keywords.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              style: {
+                marginTop: "20px",
+                marginBottom: "20px"
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+                style: {
+                  fontSize: "13px",
+                  fontWeight: "500",
+                  color: "#202124",
+                  margin: "0 0 10px 0",
+                  letterSpacing: "0.5px"
+                },
+                children: "Mots-cl\xE9s"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                style: {
+                  display: "flex",
+                  flexWrap: "wrap",
+                  gap: "6px"
+                },
+                children: selectedSection.keywords.map((keyword, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  style: {
+                    backgroundColor: "#e8f0fe",
+                    color: "#1967d2",
+                    padding: "4px 10px",
+                    borderRadius: "12px",
+                    fontSize: "12px",
+                    fontWeight: "500"
+                  },
+                  children: keyword
+                }, index))
+              })]
+            }), projectCode && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              style: {
+                marginTop: "24px",
+                paddingTop: "16px",
+                borderTop: "1px solid #e8eaed"
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                onClick: handleOpenInNewWindow,
+                onKeyDown: e => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    handleOpenInNewWindow();
+                  }
+                },
+                role: "button",
+                tabIndex: 0,
+                "aria-label": "Ouvrir dans une nouvelle fen\xEAtre",
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: "6px",
+                  color: "#1967d2",
+                  fontSize: "14px",
+                  padding: "8px",
+                  borderRadius: "4px",
+                  cursor: "pointer",
+                  transition: "background-color 0.2s"
+                },
+                onMouseEnter: e => e.currentTarget.style.backgroundColor = "#f1f3f4",
+                onMouseLeave: e => e.currentTarget.style.backgroundColor = "transparent",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  children: "Ouvrir dans une nouvelle fen\xEAtre"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+                    d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("polyline", {
+                    points: "15 3 21 3 21 9"
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
+                    x1: "10",
+                    y1: "14",
+                    x2: "21",
+                    y2: "3"
+                  })]
+                })]
+              })
+            })]
+          })
+        })
+      })]
+    }), fullscreenImage && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      onClick: handleCloseFullscreen,
+      style: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        width: "100vw",
+        height: "100vh",
+        backgroundColor: "rgba(0, 0, 0, 0.78)",
+        zIndex: 20000000,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        cursor: "zoom-out",
+        animation: "fadeIn 0.2s ease-in-out"
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        onClick: handleCloseFullscreen,
+        style: {
+          position: "absolute",
+          top: "20px",
+          right: "20px",
+          background: "rgba(255, 255, 255, 0.1)",
+          border: "none",
+          borderRadius: "50%",
+          width: "48px",
+          height: "48px",
+          cursor: "pointer",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          transition: "background-color 0.2s",
+          zIndex: 20000001
+        },
+        onMouseEnter: e => e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.2)",
+        onMouseLeave: e => e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.1)",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "24",
+          height: "24",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "white",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
+            x1: "18",
+            y1: "6",
+            x2: "6",
+            y2: "18"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
+            x1: "6",
+            y1: "6",
+            x2: "18",
+            y2: "18"
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        src: fullscreenImage,
+        alt: "Full screen view",
+        onClick: e => e.stopPropagation(),
+        style: {
+          maxWidth: "90vw",
+          maxHeight: "90vh",
+          objectFit: "contain",
+          cursor: "default",
+          boxShadow: "0 4px 20px rgba(0, 0, 0, 0.5)"
+        }
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("style", {
+      children: "\n          @keyframes fadeIn {\n            from { opacity: 0; }\n            to { opacity: 1; }\n          }\n          \n          /* Focus indicators for ContentPanel */\n          [role=\"dialog\"] button:focus-visible,\n          [role=\"dialog\"] [role=\"button\"]:focus-visible,\n          [role=\"dialog\"] a:focus-visible {\n            outline: 3px solid #1967d2 !important;\n            outline-offset: 2px !important;\n            box-shadow: 0 0 0 4px rgba(25, 103, 210, 0.1) !important;\n          }\n          \n          [role=\"dialog\"] button:focus:not(:focus-visible),\n          [role=\"dialog\"] a:focus:not(:focus-visible) {\n            outline: none;\n          }\n        "
+    })]
+  });
+};
+const BottomContent = _ref2 => {
+  let {
+    viewingReclamations,
+    viewingTijariaHistory,
+    activeChat,
+    infoMessages,
+    incidentMessages,
+    setViewingReclamations,
+    setViewingTijariaHistory,
+    setActiveChat,
+    setInfoMessages,
+    setIncidentMessages
+  } = _ref2;
+  const [selectedConversation, setSelectedConversation] = (0, _react.useState)(null);
+  if (viewingReclamations) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(ReclamationsList, {
+      onClose: () => setViewingReclamations(false)
+    });
+  }
+  if (viewingTijariaHistory) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(TijariaHistory, {
+      onClose: () => setViewingTijariaHistory(false),
+      setSelectedConversation: setSelectedConversation
+    });
+  }
+  if (activeChat) {
+    const messages = activeChat === "info" ? infoMessages : incidentMessages;
+    const setMessages = activeChat === "info" ? setInfoMessages : setIncidentMessages;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomChatInterface, {
+      type: activeChat,
+      onClose: () => setActiveChat(null),
+      messages: messages,
+      setMessages: setMessages
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TijariaChatbot, {
+    selectedConversation: selectedConversation
+  });
+};
+const CustomChatInterface = _ref3 => {
+  let {
+    type,
+    onClose,
+    messages,
+    setMessages
+  } = _ref3;
+  const [inputMessage, setInputMessage] = (0, _react.useState)("");
+  const [selectedFile, setSelectedFile] = (0, _react.useState)(null);
+  const chatRef = (0, _react.useRef)(null);
+  const fileInputRef = (0, _react.useRef)(null);
+  const chatConfig = {
+    info: {
+      title: "Live Support",
+      icon: _freeSolidSvgIcons.faHeadset,
+      color: "#17a2b8",
+      placeholder: "Posez votre question..."
+    },
+    incident: {
+      title: "Signaler un incident",
+      icon: _freeSolidSvgIcons.faWarning,
+      color: "#E82930",
+      placeholder: "Décrivez l'incident..."
+    }
+  };
+  const config = chatConfig[type];
+  (0, _react.useEffect)(() => {
+    if (chatRef.current) {
+      chatRef.current.scrollTop = chatRef.current.scrollHeight;
+    }
+  }, [messages]);
+  const handleSendMessage = () => {
+    if (!inputMessage.trim() && !selectedFile) return;
+    const newMessage = {
+      id: Date.now(),
+      sender: "user",
+      text: inputMessage,
+      file: selectedFile,
+      timestamp: new Date()
+    };
+    setMessages([...messages, newMessage]);
+    setInputMessage("");
+    setSelectedFile(null);
+    setTimeout(() => {
+      const responseMessage = {
+        id: Date.now() + 1,
+        sender: "agent",
+        text: type === "info" ? "Merci pour votre question. Notre équipe reviendra vers vous dans les plus brefs délais." : "Votre incident a été enregistré. Nous vous contacterons bientôt pour le suivi.",
+        timestamp: new Date()
+      };
+      setMessages(prev => [...prev, responseMessage]);
+    }, 1000);
+  };
+  const handleFileSelect = e => {
+    const file = e.target.files[0];
+    if (file) {
+      setSelectedFile(file);
+    }
+  };
+  const handleKeyPress = e => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSendMessage();
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: {
+      flex: 1,
+      display: "flex",
+      flexDirection: "column",
+      backgroundColor: "#f5f5f5"
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        padding: "12px 16px",
+        backgroundColor: "white",
+        borderBottom: "1px solid #e0e0e0"
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "12px",
+          paddingTop: 1,
+          paddingBottom: 2.5
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        onClick: onClose,
+        style: {
+          cursor: "pointer",
+          color: "#666",
+          padding: "4px",
+          display: "flex",
+          alignItems: "center"
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+          icon: _freeSolidSvgIcons.faTimes,
+          style: {
+            fontSize: "16px"
+          }
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "12px",
+        padding: "16px",
+        backgroundColor: "white",
+        borderBottom: "1px solid #e0e0e0"
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          width: "40px",
+          height: "40px",
+          borderRadius: "8px",
+          backgroundColor: "#f5f5f5",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+          icon: config.icon,
+          style: {
+            color: config.color,
+            fontSize: "20px"
+          }
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            fontWeight: "400",
+            color: "#333",
+            fontSize: "16px"
+          },
+          children: config.title
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            color: "#999",
+            fontSize: "12px"
+          },
+          children: "Support Agent"
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: chatRef,
+      style: {
+        flex: 1,
+        overflowY: "auto",
+        padding: "16px",
+        backgroundColor: "#f5f5f5"
+      },
+      children: messages.map(message => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: message.sender === "user" ? "flex-end" : "flex-start",
+          marginBottom: "16px"
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "6px",
+            marginBottom: "4px"
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            style: {
+              width: "6px",
+              height: "6px",
+              borderRadius: "50%",
+              backgroundColor: message.sender === "user" ? config.color : "#4CAF50"
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            style: {
+              color: "#999",
+              fontSize: "11px"
+            },
+            children: [message.sender === "user" ? "Vous" : "Support", " ", message.timestamp.toLocaleTimeString("fr-FR", {
+              hour: "2-digit",
+              minute: "2-digit"
+            })]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          style: {
+            maxWidth: "75%",
+            padding: "12px 16px",
+            borderRadius: "8px",
+            backgroundColor: message.sender === "user" ? config.color : "white",
+            color: message.sender === "user" ? "white" : "#333",
+            boxShadow: message.sender !== "user" ? "0 1px 3px rgba(0,0,0,0.1)" : "none"
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            style: {
+              fontSize: "14px",
+              lineHeight: "1.5",
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-word"
+            },
+            children: message.text
+          }), message.file && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            style: {
+              marginTop: "8px",
+              padding: "8px",
+              backgroundColor: message.sender === "user" ? "rgba(255,255,255,0.2)" : "#f5f5f5",
+              borderRadius: "4px",
+              fontSize: "12px",
+              display: "flex",
+              alignItems: "center",
+              gap: "6px"
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+              icon: _freeSolidSvgIcons.faPaperclip
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: message.file.name
+            })]
+          })]
+        }), message.sender === "user" && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          style: {
+            color: "#999",
+            fontSize: "10px",
+            marginTop: "4px"
+          },
+          children: "Lu"
+        })]
+      }, message.id))
+    }), selectedFile && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        padding: "8px 16px",
+        backgroundColor: "#fff3cd",
+        borderTop: "1px solid #ffc107",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between"
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "8px",
+          fontSize: "12px"
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+          icon: _freeSolidSvgIcons.faPaperclip,
+          style: {
+            color: "#856404"
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          style: {
+            color: "#856404"
+          },
+          children: selectedFile.name
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+        icon: _freeSolidSvgIcons.faTimes,
+        style: {
+          cursor: "pointer",
+          color: "#856404"
+        },
+        onClick: () => setSelectedFile(null)
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        display: "flex",
+        alignItems: "flex-end",
+        gap: "8px",
+        padding: "12px 16px",
+        backgroundColor: "white",
+        borderTop: "1px solid #e0e0e0"
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Input, {
+        type: "textarea",
+        rows: "1",
+        style: {
+          flex: 1,
+          border: "none",
+          resize: "none",
+          fontSize: "14px",
+          padding: "8px",
+          maxHeight: "100px",
+          overflowY: "auto",
+          outline: "none",
+          boxShadow: "none",
+          fontWeight: "400"
+        },
+        placeholder: config.placeholder,
+        value: inputMessage,
+        onChange: e => setInputMessage(e.target.value),
+        onKeyPress: handleKeyPress
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+        type: "file",
+        ref: fileInputRef,
+        style: {
+          display: "none"
+        },
+        onChange: handleFileSelect
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        onClick: () => {
+          var _fileInputRef$current;
+          return (_fileInputRef$current = fileInputRef.current) === null || _fileInputRef$current === void 0 ? void 0 : _fileInputRef$current.click();
+        },
+        style: {
+          cursor: "pointer",
+          color: "#999",
+          padding: "8px",
+          display: "flex",
+          alignItems: "center"
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+          icon: _freeSolidSvgIcons.faPaperclip,
+          style: {
+            fontSize: "18px"
+          }
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        onClick: handleSendMessage,
+        style: {
+          cursor: inputMessage.trim() || selectedFile ? "pointer" : "not-allowed",
+          color: inputMessage.trim() || selectedFile ? config.color : "#ccc",
+          padding: "8px",
+          display: "flex",
+          alignItems: "center",
+          transition: "color 0.2s"
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+          icon: _freeSolidSvgIcons.faPaperPlane,
+          style: {
+            fontSize: "18px"
+          }
+        })
+      })]
+    })]
+  });
+};
+const ReclamationFormModal = _ref4 => {
+  let {
+    open,
+    onClose
+  } = _ref4;
+  const [activeStep, setActiveStep] = (0, _react.useState)(0);
+  const [formData, setFormData] = (0, _react.useState)({
+    type: "",
+    service: "",
+    objet: "",
+    sujet: "",
+    files: []
+  });
+  const [submitted, setSubmitted] = (0, _react.useState)(false);
+  const [referenceNumber, setReferenceNumber] = (0, _react.useState)("");
+  const {
+    mutate: createReclamation,
+    isLoading
+  } = (0, _useReclamation.useCreateReclamation)();
+  const {
+    data: listServiceReclamation,
+    isFetching: isFetchingListServiceReclamation
+  } = (0, _useReclamation.useListServiceReclamation)();
+  const [error, setError] = (0, _react.useState)(null);
+  const errorRef = (0, _react.useRef)(null);
+  const CustomPopper = props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Popper, _objectSpread(_objectSpread({}, props), {}, {
+    placement: "bottom-start",
+    disablePortal: true
+  }));
+  const reclamationTypes = [{
+    codigo: "BESOIN_INFORMATIONS",
+    libelle: "Besoin d'informations"
+  }, {
+    codigo: "RECLAMATION",
+    libelle: "Réclamation"
+  }, {
+    codigo: "SIGNALER_INCIDENT_TECHNIQUE",
+    libelle: "Signaler un incident technique"
+  }];
+  const steps = ["Type de demande", "Service concerné", "Détails"];
+  const ALLOWED_FILE_TYPES = {
+    extensions: ".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif",
+    mimeTypes: ["application/pdf", "application/msword", "application/vnd.openxmlformats-officedocument.wordprocessingml.document", "application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "image/jpeg", "image/png", "image/gif"]
+  };
+  (0, _react.useEffect)(() => {
+    if (!open) {
+      setTimeout(() => {
+        setActiveStep(0);
+        setFormData({
+          type: "",
+          service: "",
+          objet: "",
+          sujet: "",
+          files: []
+        });
+        setSubmitted(false);
+        setReferenceNumber("");
+      }, 300);
+    }
+  }, [open]);
+  (0, _react.useEffect)(() => {
+    if (error && errorRef.current) {
+      errorRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "center"
+      });
+    }
+  }, [error]);
+  const handleNext = () => {
+    setActiveStep(prev => prev + 1);
+  };
+  const handleBack = () => {
+    setActiveStep(prev => prev - 1);
+  };
+  const handleTypeChange = value => {
+    setFormData(prev => _objectSpread(_objectSpread({}, prev), {}, {
+      type: value
+    }));
+  };
+  const handleServiceChange = (event, value) => {
+    setFormData(prev => _objectSpread(_objectSpread({}, prev), {}, {
+      service: value
+    }));
+  };
+  const handleFileSelect = event => {
+    const newFiles = Array.from(event.target.files);
+    const maxSize = 2 * 1024 * 1024;
+    let hasErrors = false;
+    let errorMessages = [];
+    setError(null);
+    const validFiles = newFiles.filter(file => {
+      if (!ALLOWED_FILE_TYPES.mimeTypes.includes(file.type)) {
+        const errorMsg = "".concat(file.name, ": Type de fichier non autoris\xE9.");
+        errorMessages.push(errorMsg);
+        hasErrors = true;
+        return false;
+      }
+      if (file.size > maxSize) {
+        const errorMsg = "".concat(file.name, ": Taille sup\xE9rieure \xE0 2 Mo.");
+        errorMessages.push(errorMsg);
+        hasErrors = true;
+        return false;
+      }
+      return true;
+    });
+    if (hasErrors) {
+      const fullError = errorMessages.join(" ");
+      setError(fullError);
+      _reactToastify.toast.error(fullError);
+    }
+    setFormData(prev => _objectSpread(_objectSpread({}, prev), {}, {
+      files: [...prev.files, ...validFiles]
+    }));
+  };
+  const removeFile = indexToRemove => {
+    setFormData(prev => _objectSpread(_objectSpread({}, prev), {}, {
+      files: prev.files.filter((_, index) => index !== indexToRemove)
+    }));
+  };
+  const handleSubmit = () => {
+    setError(null);
+    createReclamation(formData, {
+      onSuccess: res => {
+        setReferenceNumber(res === null || res === void 0 ? void 0 : res.reference);
+        setSubmitted(true);
+        setError(null);
+      },
+      onError: err => {
+        var _err$response$data$me, _err$response;
+        const errorMessage = (_err$response$data$me = (_err$response = err.response) === null || _err$response === void 0 || (_err$response = _err$response.data) === null || _err$response === void 0 ? void 0 : _err$response.message) !== null && _err$response$data$me !== void 0 ? _err$response$data$me : "Une erreur est survenue, veuillez réessayer plus tard.";
+        setError(errorMessage);
+        _reactToastify.toast.error(errorMessage);
+      }
+    });
+  };
+  const handleClose = () => {
+    setError(null);
+    onClose();
+  };
+  const canProceedStep1 = formData.type !== "";
+  const canProceedStep2 = formData.service !== "";
+  const canSubmit = formData.objet && formData.sujet;
+  const renderStepContent = () => {
+    switch (activeStep) {
+      case 0:
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Fade, {
+          in: true,
+          timeout: 500,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+            className: "step-content",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              variant: "h5",
+              className: "step-title",
+              gutterBottom: true,
+              children: "Quel est le type de votre demande ?"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              variant: "body2",
+              color: "text.secondary",
+              sx: {
+                mb: 4
+              },
+              children: "S\xE9lectionnez le type qui correspond le mieux \xE0 votre besoin"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormControl, {
+              fullWidth: true,
+              variant: "outlined",
+              className: "type-select",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputLabel, {
+                id: "type-label",
+                children: "Type de demande"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Select, {
+                labelId: "type-label",
+                value: formData.type,
+                onChange: e => handleTypeChange(e.target.value),
+                label: "Type de demande",
+                children: reclamationTypes.map(type => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+                  value: type.codigo,
+                  children: type.libelle
+                }, type.codigo))
+              })]
+            })]
+          })
+        });
+      case 1:
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Fade, {
+          in: true,
+          timeout: 500,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+            className: "step-content",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              variant: "h5",
+              className: "step-title",
+              gutterBottom: true,
+              children: "Quel service est concern\xE9 ?"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              variant: "body2",
+              color: "text.secondary",
+              sx: {
+                mb: formData.type === "Besoin d'informations" ? 3 : 4
+              },
+              children: "Recherchez et s\xE9lectionnez le service appropri\xE9"
+            }), formData.type === "Besoin d'informations" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Alert, {
+              severity: "Besoin d'informations",
+              icon: false,
+              sx: {
+                mb: 3,
+                pt: 1,
+                pb: 1,
+                borderRadius: 2,
+                backgroundColor: "#f5f9ff",
+                border: "1px solid #90caf9",
+                display: "flex",
+                flexDirection: "column",
+                maxWidth: 400,
+                mx: "auto"
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.AlertTitle, {
+                sx: {
+                  fontWeight: 600
+                },
+                children: "Besoin d'aide imm\xE9diate ?"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
+                variant: "body2",
+                sx: {
+                  mt: 0.5,
+                  textAlign: "center"
+                },
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
+                  children: "Assistance t\xE9l\xE9phonique: "
+                }), " \uD83D\uDCDE +212 520 47 31 00"]
+              })]
+            }), formData.type === "Besoin d'informations" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+              sx: {
+                mt: 3
+              }
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Autocomplete, {
+              options: listServiceReclamation || [],
+              loading: isFetchingListServiceReclamation,
+              value: formData.service || "",
+              onChange: handleServiceChange,
+              getOptionLabel: option => (option === null || option === void 0 ? void 0 : option.libelle) || "",
+              renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, _objectSpread(_objectSpread({}, params), {}, {
+                label: "Rechercher un service",
+                placeholder: "Commencez \xE0 taper...",
+                variant: "outlined",
+                fullWidth: true
+              })),
+              renderOption: (props, option) => /*#__PURE__*/(0, _jsxRuntime.jsx)("li", _objectSpread(_objectSpread({}, props), {}, {
+                className: "service-option",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 1,
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+                    className: "service-bullet"
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+                    children: option === null || option === void 0 ? void 0 : option.libelle
+                  })]
+                })
+              })),
+              PopperComponent: CustomPopper // 👈 forces it to stay inside modal
+              ,
+              noOptionsText: "Aucun service trouv\xE9",
+              className: "service-autocomplete"
+            })]
+          })
+        });
+      case 2:
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Fade, {
+          in: true,
+          timeout: 500,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+            className: "step-content details-step",
+            children: [error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Alert, {
+              ref: errorRef,
+              severity: "error",
+              onClose: () => setError(null),
+              style: {
+                marginBottom: "15px",
+                maxWidth: 400,
+                marginLeft: "auto",
+                marginRight: "auto"
+              },
+              children: error
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              variant: "h5",
+              className: "step-title",
+              gutterBottom: true,
+              children: "Compl\xE9tez votre demande"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              variant: "body2",
+              color: "text.secondary",
+              sx: {
+                mb: 4
+              },
+              children: "Fournissez les d\xE9tails n\xE9cessaires pour traiter votre demande"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+              className: "form-fields",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
+                fullWidth: true,
+                required: true,
+                label: "Objet",
+                placeholder: "R\xE9sum\xE9 de votre demande",
+                value: formData.objet,
+                onChange: e => setFormData(prev => _objectSpread(_objectSpread({}, prev), {}, {
+                  objet: e.target.value
+                })),
+                variant: "outlined",
+                className: "form-field"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
+                fullWidth: true,
+                required: true,
+                label: "Sujet",
+                placeholder: "D\xE9crivez en d\xE9tail votre demande...",
+                value: formData.sujet,
+                onChange: e => setFormData(prev => _objectSpread(_objectSpread({}, prev), {}, {
+                  sujet: e.target.value
+                })),
+                variant: "outlined",
+                multiline: true,
+                rows: 6,
+                className: "form-field",
+                inputProps: {
+                  maxLength: 500
+                }
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+                className: "file-upload-section",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                  type: "file",
+                  id: "file-upload",
+                  accept: ALLOWED_FILE_TYPES.extensions,
+                  hidden: true,
+                  multiple: true,
+                  onChange: handleFileSelect
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+                  htmlFor: "file-upload",
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+                    variant: "outlined",
+                    component: "span",
+                    startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.CloudUpload, {}),
+                    className: "upload-button",
+                    fullWidth: true,
+                    children: "Joindre des fichiers (optionnel)"
+                  })
+                }), formData.files.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+                  sx: {
+                    mt: 2,
+                    display: "flex",
+                    flexWrap: "wrap",
+                    gap: 1
+                  },
+                  children: formData.files.map((file, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Chip, {
+                    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.AttachFile, {}),
+                    label: file.name,
+                    onDelete: () => removeFile(index),
+                    className: "file-chip",
+                    color: "primary",
+                    variant: "outlined"
+                  }, index))
+                })]
+              })]
+            })]
+          })
+        });
+      default:
+        return null;
+    }
+  };
+  if (submitted) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Dialog, {
+      open: open,
+      onClose: handleClose,
+      maxWidth: "sm",
+      fullWidth: true,
+      className: "reclamation-modal success-modal",
+      PaperProps: {
+        className: "modal-paper"
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.DialogContent, {
+        className: "success-content",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Zoom, {
+          in: true,
+          timeout: 500,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+            className: "success-container",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.CheckCircle, {
+              className: "success-icon"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              variant: "h5",
+              className: "success-title",
+              gutterBottom: true,
+              children: "Demande enregistr\xE9e !"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              variant: "body1",
+              color: "text.secondary",
+              sx: {
+                mb: 3
+              },
+              children: "Votre demande a \xE9t\xE9 prise en charge avec succ\xE8s"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Paper, {
+              elevation: 3,
+              className: "reference-box",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+                variant: "h5",
+                className: "reference-number",
+                children: referenceNumber
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+                variant: "caption",
+                color: "text.secondary",
+                sx: {
+                  mt: 1,
+                  display: "block"
+                },
+                children: "Conservez ce num\xE9ro pour suivre votre demande"
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+              variant: "contained",
+              onClick: handleClose,
+              size: "large",
+              className: "close-success-button",
+              fullWidth: true,
+              children: "Fermer"
+            })]
+          })
+        })
+      })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Dialog, {
+    open: open,
+    onClose: handleClose,
+    maxWidth: "md",
+    fullWidth: true,
+    scroll: "body",
+    className: "reclamation-modal",
+    PaperProps: {
+      className: "modal-paper"
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      className: "modal-header",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        display: "flex",
+        alignItems: "center",
+        gap: 2,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+            variant: "h6",
+            className: "header-title",
+            children: "Nouvelle r\xE9clamation"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
+            variant: "caption",
+            color: "white",
+            children: ["Remplissez ce formulaire en ", steps.length, " \xE9tapes"]
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+        onClick: handleClose,
+        className: "close-button",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Close, {})
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      className: "progress-section",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.LinearProgress, {
+        variant: "determinate",
+        value: activeStep / (steps.length - 1) * 100,
+        className: "progress-bar"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Stepper, {
+        activeStep: activeStep,
+        className: "stepper",
+        children: steps.map(label => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Step, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.StepLabel, {
+            children: label
+          })
+        }, label))
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.DialogContent, {
+      className: "modal-content",
+      children: renderStepContent()
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      className: "modal-footer",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+        onClick: handleBack,
+        disabled: activeStep === 0,
+        startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.ArrowBack, {}),
+        className: "back-button",
+        children: "Retour"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        flex: 1
+      }), activeStep < steps.length - 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+        variant: "contained",
+        onClick: handleNext,
+        endIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.ArrowForward, {}),
+        disabled: activeStep === 0 && !canProceedStep1 || activeStep === 1 && !canProceedStep2,
+        className: "next-button",
+        children: "Suivant"
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+        variant: "contained",
+        onClick: handleSubmit,
+        disabled: !canSubmit || isLoading,
+        className: "submit-button",
+        startIcon: isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {
+          size: 16,
+          sx: {
+            color: "var(--primary-color, #222f67)"
+          }
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.CheckCircle, {}),
+        children: isLoading ? "Envoi en cours..." : "Soumettre"
+      })]
+    })]
+  });
+};
+const ReclamationsList = _ref5 => {
+  var _selectedReclamation$, _selectedReclamation$2;
+  let {
+    onClose
+  } = _ref5;
+  const queryClient = (0, _reactQuery.useQueryClient)();
+  const [selectedReclamation, setSelectedReclamation] = (0, _react.useState)(null);
+  const [detailsDialogOpen, setDetailsDialogOpen] = (0, _react.useState)(false);
+  const [page, setPage] = (0, _react.useState)(1);
+  const [search, setSearch] = (0, _react.useState)();
+  const [searchKey, setSearchKey] = (0, _react.useState)("");
+  const {
+    data: reclamations,
+    isFetching,
+    error
+  } = (0, _useReclamation.useListReclamation)(page);
+  const {
+    mutate: downloadDocument,
+    isLoading: isDownloading,
+    error: errorDownloadDocument
+  } = (0, _useReclamation.useDownloadDocument)();
+  const getStatusColor = statut => {
+    switch (statut.toLowerCase()) {
+      case "traité":
+        return "#4CAF50";
+      case "en cours":
+        return "#FF9800";
+      case "en attente":
+        return "#2196F3";
+      default:
+        return "#757575";
+    }
+  };
+  const handleReclamationClick = reclamation => {
+    setSelectedReclamation(reclamation);
+    setDetailsDialogOpen(true);
+  };
+  const handleCloseDetails = () => {
+    setDetailsDialogOpen(false);
+    setSelectedReclamation(null);
+  };
+  const formatDate = dateString => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString("fr-FR", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+      hour: "2-digit",
+      minute: "2-digit"
+    });
+  };
+  const handleDownload = (documentGuid, documentName) => {
+    downloadDocument(documentGuid, {
+      onSuccess: res => {
+        if (!(res !== null && res !== void 0 && res.data) || !(res !== null && res !== void 0 && res.fileName)) {
+          console.error("No file data or filename received");
+          return;
+        }
+        const byteCharacters = atob(res.data);
+        const byteNumbers = new Array(byteCharacters.length);
+        for (let i = 0; i < byteCharacters.length; i++) {
+          byteNumbers[i] = byteCharacters.charCodeAt(i);
+        }
+        const byteArray = new Uint8Array(byteNumbers);
+        const blob = new Blob([byteArray], {
+          type: "application/octet-stream"
+        });
+        const link = document.createElement("a");
+        link.href = URL.createObjectURL(blob);
+        link.download = documentName;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(link.href);
+      },
+      onError: err => {
+        console.error("Error downloading document:", err);
+      }
+    });
+  };
+  const onSearch = () => {
+    setSearchKey(search);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        backgroundColor: "#f5f5f5"
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        style: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          padding: "16px",
+          backgroundColor: "white",
+          borderBottom: "1px solid #e0e0e0"
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "12px"
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+            icon: _freeSolidSvgIcons.faClipboardList,
+            style: {
+              color: "var(--primary-color, #222f67)",
+              fontSize: "20px"
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              component: "div",
+              sx: {
+                fontWeight: "600",
+                color: "#333",
+                fontSize: "16px",
+                fontFamily: WIDGET_FONT,
+                margin: 0,
+                lineHeight: "normal"
+              },
+              children: "Mes r\xE9clamations"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
+              component: "div",
+              sx: {
+                color: "#999",
+                fontSize: "12px",
+                fontFamily: WIDGET_FONT,
+                margin: 0,
+                lineHeight: "normal"
+              },
+              children: [(reclamations === null || reclamations === void 0 ? void 0 : reclamations.totalElements) || 0, " r\xE9clamation(s)"]
+            })]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          onClick: onClose,
+          style: {
+            cursor: "pointer",
+            color: "#666",
+            padding: "4px",
+            display: "flex",
+            alignItems: "center"
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+            icon: _freeSolidSvgIcons.faTimes,
+            style: {
+              fontSize: "16px"
+            }
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "search-fields",
+        style: {
+          display: "flex",
+          justifyContent: "center",
+          padding: "12px",
+          paddingBottom: "0px"
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
+          placeholder: "R\xE9clamation / R\xE9f\xE9rence",
+          variant: "outlined",
+          size: "small",
+          value: search,
+          onChange: e => setSearch(e.target.value),
+          fullWidth: true,
+          InputLabelProps: {
+            style: {
+              fontSize: 12
+            }
+          },
+          sx: {
+            "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
+              borderColor: "var(--primary-color, #222f67)"
+            }
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          onClick: onSearch,
+          variant: "contained",
+          sx: {
+            minWidth: "48px",
+            width: "48px",
+            height: "40px",
+            borderRadius: "5px",
+            backgroundColor: "var(--primary-color, #222f67)",
+            "&:hover": {
+              backgroundColor: "var(--primary-color, #222f67)",
+              opacity: 0.9
+            },
+            flexShrink: 0,
+            marginLeft: "0px",
+            boxShadow: "none",
+            padding: 0
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Search, {
+            sx: {
+              color: "white",
+              fontSize: "25px"
+            }
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          flex: 1,
+          overflowY: "auto",
+          padding: "8px"
+        },
+        children: isFetching ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            display: "flex",
+            justifyContent: "center",
+            padding: "24px"
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {
+            size: 32,
+            sx: {
+              color: "var(--primary-color, #222f67)"
+            }
+          })
+        }) : (reclamations === null || reclamations === void 0 ? void 0 : reclamations.totalElements) === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: "40px 20px",
+            color: "#999"
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+            icon: _freeSolidSvgIcons.faClipboardList,
+            style: {
+              fontSize: "48px",
+              marginBottom: "32px"
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+            component: "div",
+            sx: {
+              fontSize: "14px",
+              textAlign: "center",
+              fontFamily: WIDGET_FONT,
+              lineHeight: "normal",
+              color: "#999"
+            },
+            children: "Aucune r\xE9clamation trouv\xE9e"
+          })]
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          children: [((reclamations === null || reclamations === void 0 ? void 0 : reclamations.content) || []).map(reclamation => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            onClick: () => handleReclamationClick(reclamation),
+            style: {
+              backgroundColor: "white",
+              borderRadius: "8px",
+              padding: "16px",
+              marginBottom: "5px",
+              cursor: "pointer",
+              boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+              transition: "all 0.2s ease",
+              border: "1px solid #e0e0e0"
+            },
+            onMouseEnter: e => {
+              e.currentTarget.style.boxShadow = "0 4px 8px rgba(0,0,0,0.15)";
+              e.currentTarget.style.transform = "translateY(-2px)";
+            },
+            onMouseLeave: e => {
+              e.currentTarget.style.boxShadow = "0 1px 3px rgba(0,0,0,0.1)";
+              e.currentTarget.style.transform = "translateY(0)";
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              style: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                marginBottom: "12px"
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+                component: "div",
+                sx: {
+                  fontWeight: "600",
+                  color: "var(--primary-color, #222f67)",
+                  fontSize: "14px",
+                  fontFamily: WIDGET_FONT,
+                  lineHeight: "normal"
+                },
+                children: reclamation === null || reclamation === void 0 ? void 0 : reclamation.reference
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+                component: "div",
+                sx: {
+                  padding: "4px 12px",
+                  borderRadius: "12px",
+                  backgroundColor: getStatusColor(reclamation === null || reclamation === void 0 ? void 0 : reclamation.statut) + "20",
+                  color: getStatusColor(reclamation === null || reclamation === void 0 ? void 0 : reclamation.statut),
+                  fontSize: "11px",
+                  fontWeight: "600",
+                  fontFamily: WIDGET_FONT,
+                  lineHeight: "normal"
+                },
+                children: reclamation === null || reclamation === void 0 ? void 0 : reclamation.statut
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              component: "div",
+              sx: {
+                fontWeight: "500",
+                color: "#333",
+                fontSize: "13px",
+                marginBottom: "8px",
+                fontFamily: WIDGET_FONT,
+                lineHeight: "normal"
+              },
+              children: reclamation === null || reclamation === void 0 ? void 0 : reclamation.objet
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              style: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center"
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+                component: "div",
+                sx: {
+                  color: "#999",
+                  fontSize: "11px",
+                  fontFamily: WIDGET_FONT,
+                  lineHeight: "normal"
+                },
+                children: formatDate(reclamation === null || reclamation === void 0 ? void 0 : reclamation.dateCreation)
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
+                component: "div",
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "4px",
+                  color: "var(--primary-color, #222f67)",
+                  fontSize: "11px",
+                  fontWeight: "500",
+                  fontFamily: WIDGET_FONT,
+                  lineHeight: "normal"
+                },
+                children: ["Voir d\xE9tails", /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+                  icon: _freeSolidSvgIcons.faEye
+                })]
+              })]
+            })]
+          }, reclamation === null || reclamation === void 0 ? void 0 : reclamation.id)), (reclamations === null || reclamations === void 0 ? void 0 : reclamations.totalPages) > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            style: {
+              display: "flex",
+              justifyContent: "center",
+              marginTop: "8px",
+              marginBottom: "8px"
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Pagination, {
+              size: "small",
+              variant: "outlined",
+              count: (reclamations === null || reclamations === void 0 ? void 0 : reclamations.totalPages) || 0,
+              page: page,
+              onChange: (event, value) => setPage(value)
+            })
+          })]
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Dialog, {
+      open: detailsDialogOpen,
+      onClose: handleCloseDetails,
+      maxWidth: "sm",
+      fullWidth: true,
+      PaperProps: {
+        sx: {
+          borderRadius: 3,
+          boxShadow: "0 8px 32px rgba(0,0,0,0.12)"
+        }
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.DialogTitle, {
+        sx: {
+          backgroundColor: "#f8f9fa",
+          borderBottom: "1px solid #e0e0e0",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          padding: "20px 24px"
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "12px"
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+            icon: _freeSolidSvgIcons.faInfoCircle,
+            style: {
+              color: "var(--primary-color, #222f67)",
+              fontSize: "20px"
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              component: "div",
+              sx: {
+                fontWeight: "700",
+                fontSize: "16px",
+                margin: 0
+              },
+              children: "D\xE9tails de la r\xE9clamation"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              component: "div",
+              sx: {
+                color: "#666",
+                fontSize: "12px",
+                marginTop: "3px"
+              },
+              children: selectedReclamation === null || selectedReclamation === void 0 ? void 0 : selectedReclamation.reference
+            })]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Chip, {
+          label: selectedReclamation === null || selectedReclamation === void 0 ? void 0 : selectedReclamation.statut,
+          size: "small",
+          sx: {
+            backgroundColor: getStatusColor((selectedReclamation === null || selectedReclamation === void 0 ? void 0 : selectedReclamation.statut) || "") + "20",
+            color: getStatusColor((selectedReclamation === null || selectedReclamation === void 0 ? void 0 : selectedReclamation.statut) || ""),
+            fontWeight: 600,
+            fontSize: "11px"
+          }
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.DialogContent, {
+        sx: {
+          padding: "24px"
+        },
+        children: selectedReclamation && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: "20px"
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              component: "div",
+              sx: {
+                fontSize: "11px",
+                color: "#999",
+                fontWeight: "500",
+                marginBottom: "6px",
+                textTransform: "uppercase",
+                letterSpacing: "0.5px",
+                fontWeight: "500",
+                fontFamily: WIDGET_FONT
+              },
+              children: "Type de demande"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              component: "div",
+              sx: {
+                fontSize: "14px",
+                color: "#333",
+                fontWeight: "500",
+                fontFamily: WIDGET_FONT
+              },
+              children: selectedReclamation === null || selectedReclamation === void 0 ? void 0 : selectedReclamation.type
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              component: "div",
+              sx: {
+                fontSize: "11px",
+                color: "#999",
+                fontWeight: "500",
+                marginBottom: "6px",
+                textTransform: "uppercase",
+                letterSpacing: "0.5px",
+                fontFamily: WIDGET_FONT
+              },
+              children: "Service concern\xE9"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              component: "div",
+              sx: {
+                fontSize: "14px",
+                color: "#333",
+                fontWeight: "500",
+                fontFamily: WIDGET_FONT
+              },
+              children: selectedReclamation === null || selectedReclamation === void 0 ? void 0 : selectedReclamation.service
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              component: "div",
+              sx: {
+                fontSize: "11px",
+                color: "#999",
+                fontWeight: "500",
+                marginBottom: "6px",
+                textTransform: "uppercase",
+                letterSpacing: "0.5px",
+                fontFamily: WIDGET_FONT
+              },
+              children: "R\xE9f\xE9rence"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              component: "div",
+              sx: {
+                fontSize: "14px",
+                color: "#333",
+                fontWeight: "500",
+                fontFamily: WIDGET_FONT
+              },
+              children: selectedReclamation === null || selectedReclamation === void 0 ? void 0 : selectedReclamation.reference
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              component: "div",
+              sx: {
+                fontSize: "11px",
+                color: "#999",
+                fontWeight: "500",
+                marginBottom: "6px",
+                textTransform: "uppercase",
+                letterSpacing: "0.5px",
+                fontFamily: WIDGET_FONT
+              },
+              children: "Objet"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              component: "div",
+              sx: {
+                fontSize: "14px",
+                color: "#333",
+                fontWeight: "500",
+                fontFamily: WIDGET_FONT
+              },
+              children: selectedReclamation === null || selectedReclamation === void 0 ? void 0 : selectedReclamation.objet
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              component: "div",
+              sx: {
+                fontSize: "11px",
+                color: "#999",
+                fontWeight: "500",
+                marginBottom: "6px",
+                textTransform: "uppercase",
+                letterSpacing: "0.5px",
+                fontFamily: WIDGET_FONT
+              },
+              children: "Description"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              component: "div",
+              sx: {
+                fontSize: "14px",
+                color: "#333",
+                lineHeight: "1.6",
+                backgroundColor: "#f8f9fa",
+                padding: "12px",
+                borderRadius: "8px",
+                border: "1px solid #e0e0e0",
+                whiteSpace: "pre-line",
+                fontFamily: WIDGET_FONT
+              },
+              children: selectedReclamation === null || selectedReclamation === void 0 ? void 0 : selectedReclamation.description
+            })]
+          }), (selectedReclamation === null || selectedReclamation === void 0 ? void 0 : selectedReclamation.response) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
+              component: "div",
+              sx: {
+                fontSize: "11px",
+                color: "#999",
+                fontWeight: "500",
+                marginBottom: "6px",
+                textTransform: "uppercase",
+                letterSpacing: "0.5px",
+                fontFamily: WIDGET_FONT,
+                display: "flex",
+                alignItems: "center",
+                gap: "6px"
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+                icon: _freeSolidSvgIcons.faReply,
+                style: {
+                  color: "#6c757d",
+                  fontSize: "12px"
+                }
+              }), "R\xE9ponse"]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              style: {
+                fontSize: "14px",
+                color: "#333",
+                lineHeight: "1.6",
+                backgroundColor: "#f5f6f7",
+                padding: "12px",
+                borderRadius: "8px",
+                border: "2px solid #6c757d",
+                whiteSpace: "pre-line"
+              },
+              children: selectedReclamation === null || selectedReclamation === void 0 ? void 0 : selectedReclamation.response
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              component: "div",
+              sx: {
+                fontSize: "11px",
+                color: "#999",
+                fontWeight: "500",
+                marginBottom: "6px",
+                textTransform: "uppercase",
+                letterSpacing: "0.5px",
+                fontFamily: WIDGET_FONT
+              },
+              children: "Date de cr\xE9ation"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              component: "div",
+              sx: {
+                fontSize: "14px",
+                color: "#333",
+                fontWeight: "500",
+                fontFamily: WIDGET_FONT
+              },
+              children: formatDate(selectedReclamation === null || selectedReclamation === void 0 ? void 0 : selectedReclamation.dateCreation)
+            })]
+          }), (selectedReclamation === null || selectedReclamation === void 0 ? void 0 : selectedReclamation.documents) && (selectedReclamation === null || selectedReclamation === void 0 || (_selectedReclamation$ = selectedReclamation.documents) === null || _selectedReclamation$ === void 0 ? void 0 : _selectedReclamation$.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
+              component: "div",
+              sx: {
+                fontSize: "11px",
+                color: "#999",
+                fontWeight: "500",
+                marginBottom: "12px",
+                textTransform: "uppercase",
+                letterSpacing: "0.5px",
+                fontFamily: WIDGET_FONT
+              },
+              children: ["Pi\xE8ces jointes (", selectedReclamation === null || selectedReclamation === void 0 || (_selectedReclamation$2 = selectedReclamation.documents) === null || _selectedReclamation$2 === void 0 ? void 0 : _selectedReclamation$2.length, ")"]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                gap: "8px"
+              },
+              children: selectedReclamation.documents.map((document, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "12px",
+                  padding: "12px",
+                  backgroundColor: "#f8f9fa",
+                  borderRadius: "8px",
+                  border: "1px solid #e0e0e0",
+                  cursor: isDownloading ? "not-allowed" : "pointer",
+                  opacity: isDownloading ? 0.6 : 1,
+                  transition: "all 0.2s ease"
+                },
+                onClick: () => !isDownloading && handleDownload(document.documentGuid, document.documentName),
+                onMouseEnter: e => {
+                  if (!isDownloading) {
+                    e.currentTarget.style.backgroundColor = "#e9ecef";
+                    e.currentTarget.style.borderColor = "var(--primary-color, #222f67)";
+                  }
+                },
+                onMouseLeave: e => {
+                  if (!isDownloading) {
+                    e.currentTarget.style.backgroundColor = "#f8f9fa";
+                    e.currentTarget.style.borderColor = "#e0e0e0";
+                  }
+                },
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+                  icon: _freeSolidSvgIcons.faPaperclip,
+                  style: {
+                    color: "var(--primary-color, #222f67)",
+                    fontSize: "16px"
+                  }
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                  style: {
+                    flex: 1
+                  },
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+                    component: "div",
+                    sx: {
+                      fontSize: "13px",
+                      color: "#333",
+                      fontWeight: "500",
+                      fontFamily: WIDGET_FONT
+                    },
+                    children: document.documentName
+                  }), document.dateUpload && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
+                    component: "div",
+                    sx: {
+                      fontSize: "11px",
+                      color: "#999",
+                      marginTop: "2px",
+                      fontFamily: WIDGET_FONT
+                    },
+                    children: ["Ajout\xE9 le ", formatDate(document.dateUpload)]
+                  })]
+                }), isDownloading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {
+                  size: 16,
+                  style: {
+                    color: "var(--primary-color, #222f67)"
+                  }
+                }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+                  icon: _freeSolidSvgIcons.faDownload,
+                  style: {
+                    color: "var(--primary-color, #222f67)",
+                    fontSize: "14px"
+                  }
+                })]
+              }, document.id || index))
+            })]
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.DialogActions, {
+        sx: {
+          padding: "16px 24px",
+          borderTop: "1px solid #e0e0e0",
+          backgroundColor: "#f8f9fa"
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          onClick: handleCloseDetails,
+          variant: "contained",
+          sx: {
+            backgroundColor: "var(--primary-color, #222f67)",
+            color: "white",
+            padding: "5.5px 23px",
+            borderRadius: "6px",
+            fontWeight: "500",
+            fontSize: "14px",
+            fontFamily: WIDGET_FONT,
+            textTransform: "none",
+            boxShadow: "none",
+            "&:hover": {
+              backgroundColor: "var(--secondary-color, #2d3d7f)",
+              boxShadow: "none"
+            }
+          },
+          children: "Fermer"
+        })
+      })]
+    })]
+  });
+};
+const TijariaChatbot = selectedConversation => {
+  const {
+    tijariaUrl,
+    apiAuthUrl,
+    token
+  } = (0, _PuiHelpWidgetContext.useHelpWidget)();
+  const iframeRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    const handleMessage = event => {
+      if (event.origin !== tijariaUrl) {
+        console.warn("Message from unauthorized origin:", event.origin);
+        return;
+      }
+      if (event.data && event.data.type === "TOKEN_RECEIVED") {
+        console.log("Token delivery confirmed by iframe:", event.data);
+        sessionStorage.setItem("tijaria_token", event.data.token);
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, []);
+  (0, _react.useEffect)(() => {
+    const iframe = iframeRef.current;
+    const handleLoad = () => {
+      iframe.contentWindow.postMessage({
+        type: "SET_TOKEN",
+        token: token,
+        userInfoApi: "".concat(apiAuthUrl, "/auth/keycloak/user-profile")
+      }, tijariaUrl);
+    };
+    iframe.addEventListener("load", handleLoad);
+    return () => iframe.removeEventListener("load", handleLoad);
+  }, []);
+  (0, _react.useEffect)(() => {
+    console.log("selectedConversation", selectedConversation);
+    const iframe = iframeRef.current;
+    const handleSelect = () => {
+      iframe.contentWindow.postMessage({
+        type: "CONVERSATION_SELECTED",
+        sessionId: selectedConversation.selectedConversation || null
+      }, tijariaUrl);
+    };
+    iframe.addEventListener("load", handleSelect);
+    return () => iframe.removeEventListener("load", handleSelect);
+  }, [selectedConversation]);
+  const isExpanded = true;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      flex: 1,
+      overflow: "auto",
+      display: "flex",
+      flexDirection: "column"
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        flex: 1,
+        position: "relative"
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("iframe", {
+        ref: iframeRef,
+        id: "chatbot-iframe",
+        title: "TijarIA",
+        src: "".concat(tijariaUrl, "/assistantBot?source=PGU&expanded=").concat(isExpanded),
+        allow: "microphone",
+        sandbox: "allow-popups allow-scripts allow-same-origin",
+        style: {
+          width: "100%",
+          height: "90%",
+          border: "none",
+          position: "absolute",
+          top: 0,
+          left: 0
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        onClick: () => {
+          const iframe = iframeRef.current;
+          if (iframe) {
+            iframe.contentWindow.postMessage({
+              type: "toggleSize",
+              isExpanded: true
+            }, tijariaUrl);
+          }
+        },
+        style: {
+          position: "absolute",
+          bottom: "20px",
+          left: "50%",
+          transform: "translateX(-50%)",
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+          gap: "10px",
+          padding: "8px 16px",
+          border: "none",
+          backgroundColor: "transparent",
+          cursor: "pointer"
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          src: _tijariaLogo.default,
+          alt: "Tijaria Logo",
+          style: {
+            width: "24px",
+            height: "24px",
+            objectFit: "contain",
+            flexShrink: 0
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          component: "div",
+          sx: {
+            fontSize: "16px",
+            fontWeight: "500",
+            fontFamily: WIDGET_FONT,
+            margin: 0,
+            lineHeight: "normal",
+            color: "#495057"
+          },
+          children: "TijarIA"
+        })]
+      })]
+    })
+  });
+};
+const TijariaHistory = _ref6 => {
+  let {
+    onClose,
+    setSelectedConversation
+  } = _ref6;
+  const [conversations, setConversations] = (0, _react.useState)([]);
+  const [loading, setLoading] = (0, _react.useState)(true);
+  const [error, setError] = (0, _react.useState)(null);
+  (0, _react.useEffect)(() => {
+    fetchUserHistory();
+  }, []);
+  const fetchUserHistory = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch("https://chatbot-dev.portnet.ma/api/user/getUserHistory", {
+        method: "GET",
+        headers: {
+          Authorization: "Bearer ".concat(sessionStorage.getItem("tijaria_token")),
+          "Content-Type": "application/json"
+        }
+      });
+      if (!response.ok) {
+        throw new Error("Erreur lors de la récupération de l'historique");
+      }
+      const data = await response.json();
+      setConversations(data);
+      setError(null);
+    } catch (err) {
+      console.error("Error fetching history:", err);
+      setError(err.message);
+      setConversations([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleConversationClick = conversation => {
+    console.log(" Conversation clicked:", conversation);
+    setSelectedConversation(conversation.sessionId);
+    onClose();
+  };
+  const formatDate = dateString => {
+    if (!dateString) return "N/A";
+    const date = new Date(dateString);
+    return date.toLocaleDateString("fr-FR", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+      hour: "2-digit",
+      minute: "2-digit"
+    });
+  };
+  const truncateText = function truncateText(text) {
+    let maxLength = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 80;
+    if (!text) return "";
+    return text.length > maxLength ? text.substring(0, maxLength) + "..." : text;
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: {
+      flex: 1,
+      display: "flex",
+      flexDirection: "column",
+      backgroundColor: "#f5f5f5"
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        padding: "16px",
+        backgroundColor: "white",
+        borderBottom: "1px solid #e0e0e0"
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "12px"
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+          icon: _freeSolidSvgIcons.faComments,
+          style: {
+            color: "var(--primary-color, #222f67)",
+            fontSize: "20px"
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+            component: "div",
+            sx: {
+              fontWeight: "600",
+              color: "#333",
+              fontSize: "16px",
+              fontFamily: WIDGET_FONT,
+              margin: 0,
+              lineHeight: "normal"
+            },
+            children: "Historique TijarIA"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+            component: "div",
+            sx: {
+              color: "#999",
+              fontSize: "12px",
+              fontFamily: WIDGET_FONT,
+              margin: 0,
+              lineHeight: "normal"
+            },
+            children: loading ? "Chargement..." : "".concat(conversations.length, " conversation(s)")
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        onClick: onClose,
+        style: {
+          cursor: "pointer",
+          color: "#666",
+          padding: "4px",
+          display: "flex",
+          alignItems: "center"
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+          icon: _freeSolidSvgIcons.faTimes,
+          style: {
+            fontSize: "16px"
+          }
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        flex: 1,
+        overflowY: "auto",
+        padding: "12px"
+      },
+      children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "40px 20px",
+          color: "#999"
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            width: "40px",
+            height: "40px",
+            border: "4px solid #f3f3f3",
+            borderTop: "4px solid var(--primary-color, #222f67)",
+            borderRadius: "50%",
+            animation: "spin 1s linear infinite"
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("style", {
+          children: "\n                  @keyframes spin {\n                    0% { transform: rotate(0deg); }\n                    100% { transform: rotate(360deg); }\n                  }\n                "
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          component: "div",
+          sx: {
+            fontSize: "14px",
+            marginTop: "32px",
+            fontFamily: WIDGET_FONT,
+            lineHeight: "normal",
+            color: "#999"
+          },
+          children: "Chargement de l'historique..."
+        })]
+      }) : error ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "40px 20px",
+          color: "#dc3545"
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+          icon: _freeSolidSvgIcons.faWarning,
+          style: {
+            fontSize: "48px",
+            marginBottom: "16px"
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          component: "div",
+          sx: {
+            fontSize: "14px",
+            textAlign: "center",
+            fontFamily: WIDGET_FONT,
+            margin: 0,
+            lineHeight: "normal"
+          },
+          children: error
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          onClick: fetchUserHistory,
+          variant: "contained",
+          sx: {
+            marginTop: "35px",
+            padding: "6px 20px",
+            backgroundColor: "var(--primary-color, #222f67)",
+            color: "white",
+            borderRadius: "6px",
+            fontSize: "14px",
+            fontWeight: "600",
+            fontFamily: WIDGET_FONT,
+            textTransform: "none",
+            boxShadow: "none",
+            "&:hover": {
+              backgroundColor: "var(--primary-color, #222f67)",
+              opacity: 0.9,
+              boxShadow: "none"
+            }
+          },
+          children: "R\xE9essayer"
+        })]
+      }) : conversations.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "40px 20px",
+          color: "#999"
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+          icon: _freeSolidSvgIcons.faComments,
+          style: {
+            fontSize: "48px",
+            marginBottom: "32px"
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          component: "div",
+          sx: {
+            fontSize: "14px",
+            textAlign: "center",
+            fontFamily: WIDGET_FONT,
+            lineHeight: "normal",
+            color: "#999"
+          },
+          children: "Aucune conversation trouv\xE9e"
+        })]
+      }) : conversations.map((conversation, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        onClick: () => handleConversationClick(conversation),
+        style: {
+          backgroundColor: "white",
+          borderRadius: "8px",
+          padding: "16px",
+          marginBottom: "12px",
+          cursor: "pointer",
+          boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+          transition: "all 0.2s ease",
+          border: "1px solid #e0e0e0"
+        },
+        onMouseEnter: e => {
+          e.currentTarget.style.boxShadow = "0 4px 8px rgba(0,0,0,0.15)";
+          e.currentTarget.style.transform = "translateY(-2px)";
+        },
+        onMouseLeave: e => {
+          e.currentTarget.style.boxShadow = "0 1px 3px rgba(0,0,0,0.1)";
+          e.currentTarget.style.transform = "translateY(0)";
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          style: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            marginBottom: "12px"
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "8px"
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+              icon: _freeSolidSvgIcons.faComments,
+              style: {
+                color: "var(--primary-color, #222f67)",
+                fontSize: "14px"
+              }
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              component: "div",
+              sx: {
+                fontWeight: "600",
+                color: "#333",
+                fontSize: "13px",
+                fontFamily: WIDGET_FONT,
+                margin: 0,
+                lineHeight: "normal"
+              },
+              children: truncateText(conversation.title || "Aucun titre disponible")
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            style: {
+              color: "#999",
+              fontSize: "11px"
+            },
+            children: conversation.createdAt && formatDate(conversation.createdAt)
+          })]
+        })
+      }, conversation.id || index))
+    })]
+  });
+};
+const PuiHelpWidget = _ref7 => {
+  let {
+    showReclamation = true,
+    showGuides = false,
+    currentProjectCode = null,
+    guideBaseUrl
+  } = _ref7;
+  const [dropdownOpen, setDropdownOpen] = (0, _react.useState)(false);
+  const [isTourActive, setIsTourActive] = (0, _react.useState)(false);
+  const {
+    guideApi
+  } = (0, _PuiHelpWidgetContext.useHelpWidget)();
+  const toggle = () => {
+    setDropdownOpen(prev => !prev);
+  };
+  (0, _react.useEffect)(() => {
+    const openDropdown = () => {
+      setIsOpen(true);
+      setIsTourActive(true);
+    };
+    const closeDropdown = () => {
+      setIsOpen(false);
+      setIsTourActive(false);
+    };
+    window.addEventListener("open-aide-dropdown", openDropdown);
+    window.addEventListener("close-aide-dropdown", closeDropdown);
+    return () => {
+      window.removeEventListener("open-aide-dropdown", openDropdown);
+      window.removeEventListener("close-aide-dropdown", closeDropdown);
+    };
+  }, []);
+  const dispatch = (0, _reactRedux.useDispatch)();
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const sidebarRef = (0, _react.useRef)(null);
+  const triggerRef = (0, _react.useRef)(null);
+  const firstFocusableRef = (0, _react.useRef)(null);
+  const contactPopoverRef = (0, _react.useRef)(null);
+  const firstContactFocusableRef = (0, _react.useRef)(null);
+  const previousContactActiveElement = (0, _react.useRef)(null);
+  const previousActiveElement = (0, _react.useRef)(null);
+  const [hoveredIndex, setHoveredIndex] = (0, _react.useState)(null);
+  const [activeChat, setActiveChat] = (0, _react.useState)(null);
+  const [infoMessages, setInfoMessages] = (0, _react.useState)([]);
+  const [incidentMessages, setIncidentMessages] = (0, _react.useState)([]);
+  const [reclamationModalOpen, setReclamationModalOpen] = (0, _react.useState)(false);
+  const [viewingReclamations, setViewingReclamations] = (0, _react.useState)(false);
+  const [viewingTijariaHistory, setViewingTijariaHistory] = (0, _react.useState)(false);
+  const [contactUsMenuAnchor, setContactUsMenuAnchor] = (0, _react.useState)(null);
+  const contactUsMenuOpen = Boolean(contactUsMenuAnchor);
+  const [popupPosition, setPopupPosition] = (0, _react.useState)({
+    x: 0,
+    y: 0
+  });
+  const [isDragging, setIsDragging] = (0, _react.useState)(false);
+  const [dragStart, setDragStart] = (0, _react.useState)({
+    x: 0,
+    y: 0
+  });
+  const [guidesPanelOpen, setGuidesPanelOpen] = (0, _react.useState)(false);
+  const [faqPanelOpen, setFaqPanelOpen] = (0, _react.useState)(false);
+  const [guideData, setGuideData] = (0, _react.useState)(null);
+  const [faqData, setFaqData] = (0, _react.useState)(null);
+  const [loadingGuide, setLoadingGuide] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    async function fetchGuideData() {
+      if (!showGuides || !currentProjectCode || !guidesPanelOpen) return;
+      try {
+        var _response$data;
+        const response = await guideApi.getGuideContent(currentProjectCode);
+        setGuideData(response === null || response === void 0 || (_response$data = response.data) === null || _response$data === void 0 ? void 0 : _response$data.body);
+      } catch (error) {
+        console.error("Error loading guide data:", error);
+        setGuideData(null);
+      }
+    }
+    fetchGuideData();
+  }, [currentProjectCode, guidesPanelOpen, showGuides]);
+  (0, _react.useEffect)(() => {
+    async function fetchFaqData() {
+      if (!faqPanelOpen) return;
+      try {
+        const faqModule = await _guides.default["FAQ"];
+        const data = faqModule.default || faqModule;
+        setFaqData(data);
+      } catch (error) {
+        console.error("Error loading FAQ data:", error);
+        setFaqData(null);
+      }
+    }
+    fetchFaqData();
+  }, [faqPanelOpen]);
+  const handleGuideMenuClick = event => {
+    setIsOpen(false);
+    setGuidesPanelOpen(true);
+  };
+  const handleFaqClick = () => {
+    setIsOpen(false);
+    setFaqPanelOpen(true);
+  };
+  const handleContactUsClick = event => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    setContactUsMenuAnchor(event.currentTarget);
+    setPopupPosition({
+      x: rect.left - 291,
+      y: rect.top
+    });
+  };
+  const handleContactUsMenuClose = () => {
+    setContactUsMenuAnchor(null);
+  };
+  const handleContactClick = () => {
+    window.location.href = "mailto:support@moroccotradenet.ma";
+    handleContactUsMenuClose();
+  };
+  const handlePdfGuideClick = async () => {
+    setLoadingGuide(true);
+    try {
+      var _response$data2;
+      const response = await guideApi.getGuideByProjectCode(currentProjectCode);
+      const guideData = response === null || response === void 0 || (_response$data2 = response.data) === null || _response$data2 === void 0 ? void 0 : _response$data2.body;
+      if (guideData !== null && guideData !== void 0 && guideData.urlFichier) {
+        const link = document.createElement("a");
+        link.href = guideData.urlFichier;
+        link.setAttribute("download", "");
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+      } else {
+        console.warn("No PDF guide found for project: ".concat(currentProjectCode));
+      }
+    } catch (error) {
+      console.error("Error fetching guide:", error);
+    } finally {
+      setLoadingGuide(false);
+    }
+  };
+  const handleMouseDown = e => {
+    if (e.target.classList.contains("draggable-handle")) {
+      setIsDragging(true);
+      setDragStart({
+        x: e.clientX - popupPosition.x,
+        y: e.clientY - popupPosition.y
+      });
+    }
+  };
+  const handleMouseMove = e => {
+    if (isDragging) {
+      setPopupPosition({
+        x: e.clientX - dragStart.x,
+        y: e.clientY - dragStart.y
+      });
+    }
+  };
+  const handleMouseUp = () => {
+    setIsDragging(false);
+  };
+  (0, _react.useEffect)(() => {
+    if (isDragging) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      return () => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+    }
+  }, [isDragging, dragStart, popupPosition]);
+  (0, _react.useEffect)(() => {
+    if (isOpen) {
+      previousActiveElement.current = document.activeElement;
+      setTimeout(() => {
+        var _firstFocusableRef$cu3;
+        (_firstFocusableRef$cu3 = firstFocusableRef.current) === null || _firstFocusableRef$cu3 === void 0 || _firstFocusableRef$cu3.focus();
+      }, 100);
+    } else {
+      if (previousActiveElement.current) {
+        previousActiveElement.current.focus();
+      }
+    }
+  }, [isOpen]);
+  (0, _react.useEffect)(() => {
+    if (!isOpen) return;
+    const handleKeyDown = e => {
+      if (e.key === "Escape") {
+        setIsOpen(false);
+        return;
+      }
+      if (e.key === "Tab") {
+        const sidebar = sidebarRef.current;
+        if (!sidebar) return;
+        const focusableElements = sidebar.querySelectorAll('button:not([disabled]), [href]:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled])');
+        const focusableArray = Array.from(focusableElements);
+        const firstElement = focusableArray[0];
+        const lastElement = focusableArray[focusableArray.length - 1];
+        if (focusableArray.length === 0) return;
+        if (e.shiftKey) {
+          if (document.activeElement === firstElement) {
+            lastElement.focus();
+            e.preventDefault();
+          }
+        } else {
+          if (document.activeElement === lastElement) {
+            firstElement.focus();
+            e.preventDefault();
+          }
+        }
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen]);
+  (0, _react.useEffect)(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isOpen]);
+  (0, _react.useEffect)(() => {
+    if (contactUsMenuOpen) {
+      previousContactActiveElement.current = document.activeElement;
+      setTimeout(() => {
+        const popover = contactPopoverRef.current;
+        if (popover) {
+          const firstMenuItem = popover.querySelector('[role="menuitem"]');
+          if (firstMenuItem) {
+            firstMenuItem.focus();
+          }
+        }
+      }, 100);
+    } else {
+      if (previousContactActiveElement.current) {
+        previousContactActiveElement.current.focus();
+      }
+    }
+  }, [contactUsMenuOpen]);
+  (0, _react.useEffect)(() => {
+    if (!contactUsMenuOpen) return;
+    const handleKeyDown = e => {
+      if (e.key === "Escape") {
+        handleContactUsMenuClose();
+        return;
+      }
+      if (e.key === "Tab") {
+        const popover = contactPopoverRef.current;
+        if (!popover) return;
+        const focusableElements = popover.querySelectorAll('button:not([disabled]), [role="menuitem"]:not([disabled]), [href]:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled])');
+        const focusableArray = Array.from(focusableElements);
+        const firstElement = focusableArray[0];
+        const lastElement = focusableArray[focusableArray.length - 1];
+        if (focusableArray.length === 0) return;
+        if (e.shiftKey) {
+          if (document.activeElement === firstElement) {
+            lastElement.focus();
+            e.preventDefault();
+          }
+        } else {
+          if (document.activeElement === lastElement) {
+            firstElement.focus();
+            e.preventDefault();
+          }
+        }
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [contactUsMenuOpen]);
+  const navigationLinks = [...(showGuides && currentProjectCode ? [{
+    icon: _freeSolidSvgIcons.faBook,
+    title: "Guides utilisateurs",
+    action: handleGuideMenuClick
+  }] : []), {
+    icon: _freeSolidSvgIcons.faPen,
+    title: "Foires aux questions",
+    id: "foire-aux-questions",
+    action: handleFaqClick
+  }, ...(showReclamation ? [{
+    icon: _freeSolidSvgIcons.faClipboardList,
+    title: "Mes réclamations",
+    id: "mes-reclamations",
+    action: () => setViewingReclamations(true)
+  }, {
+    icon: _freeSolidSvgIcons.faBullhorn,
+    title: "Nouvelle réclamation",
+    id: "nouvelle-reclamation",
+    action: () => setReclamationModalOpen(true)
+  }] : []), {
+    icon: _freeSolidSvgIcons.faAddressBook,
+    title: "Contactez-nous",
+    id: "contactez-nous",
+    action: handleContactUsClick
+  },
+  /*{
+    icon: faComments,
+    title: "TijarIA",
+    action: () => {
+      setActiveChat(null);
+      setViewingReclamations(false);
+    },
+  },*/
+  {
+    icon: _freeSolidSvgIcons.faComments,
+    title: "Mes Conversations",
+    id: "mes-conversations",
+    action: () => {
+      setViewingTijariaHistory(true);
+      setViewingReclamations(false);
+    }
+  }];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "help-widget-button ".concat(isOpen ? "open" : ""),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.Button, {
+        ref: triggerRef,
+        color: "light",
+        className: "help-trigger",
+        onClick: () => setIsOpen(!isOpen),
+        "aria-label": "Ouvrir le centre d'aide",
+        "aria-expanded": isOpen,
+        "aria-controls": "help-sidebar",
+        tabIndex: 0,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          component: "div",
+          sx: {
+            fontWeight: "600",
+            fontSize: "14px",
+            color: "#282828",
+            fontFamily: WIDGET_FONT,
+            margin: 0,
+            padding: 0,
+            lineHeight: "normal"
+          },
+          children: "Besoin d'aide ?"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+          icon: isOpen ? _freeSolidSvgIcons.faChevronLeft : _freeSolidSvgIcons.faChevronRight,
+          className: "arrow-icon",
+          "aria-hidden": "true"
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      id: "help-sidebar",
+      ref: sidebarRef,
+      className: "help-widget-sidebar ".concat(isOpen ? "open" : ""),
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": "help-title",
+      "aria-hidden": !isOpen,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Card, {
+        className: "h-100 border-0 shadow-lg",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.CardBody, {
+          className: "p-0 d-flex flex-column",
+          style: {
+            flex: 1,
+            minHeight: 0
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            style: {
+              paddingTop: "12px",
+              paddingBottom: "20px",
+              paddingLeft: "17px",
+              paddingRight: "20px",
+              borderBottom: "1px solid #e9ecef",
+              backgroundColor: "white",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between"
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              style: {
+                display: "flex",
+                alignItems: "center"
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+                icon: _freeRegularSvgIcons.faQuestionCircle,
+                style: {
+                  color: "var(--primary-color, #222f67)",
+                  fontSize: "24px",
+                  marginRight: "8px",
+                  flexShrink: 0
+                },
+                "aria-hidden": "true"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+                id: "help-title",
+                component: "div",
+                onClick: () => setIsOpen(false),
+                sx: {
+                  margin: 0,
+                  color: "#495057",
+                  fontWeight: "600",
+                  fontSize: "16px",
+                  cursor: "pointer",
+                  userSelect: "none",
+                  flex: 1,
+                  lineHeight: "normal",
+                  fontFamily: WIDGET_FONT,
+                  "&:hover": {
+                    color: "var(--primary-color, #222f67)"
+                  }
+                },
+                children: "Centre d'aide"
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+              ref: firstFocusableRef,
+              onClick: () => setIsOpen(false),
+              "aria-label": "Fermer le centre d'aide",
+              tabIndex: 0,
+              style: {
+                background: "none",
+                border: "none",
+                fontSize: "20px",
+                cursor: "pointer",
+                padding: "4px 8px",
+                color: "#6c757d",
+                lineHeight: 1,
+                borderRadius: "4px"
+              },
+              onMouseEnter: e => {
+                e.currentTarget.style.backgroundColor = "#f0f0f0";
+              },
+              onMouseLeave: e => {
+                e.currentTarget.style.backgroundColor = "transparent";
+              },
+              children: "\u2715"
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            style: {
+              padding: "15px 15px",
+              borderBottom: "1px solid #e9ecef",
+              backgroundColor: "white"
+            },
+            children: navigationLinks.map((link, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              id: link.id,
+              onClick: link.action,
+              onKeyDown: e => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  link.action(e);
+                }
+              },
+              role: "button",
+              tabIndex: 0,
+              "aria-label": link.title,
+              style: {
+                display: "flex",
+                alignItems: "center",
+                padding: "8px 12px",
+                marginRight: "130px",
+                cursor: "pointer",
+                transition: "all 0.2s ease",
+                borderRadius: "4px",
+                backgroundColor: hoveredIndex === index ? "#f0f0ef" : "transparent"
+              },
+              onMouseEnter: () => setHoveredIndex(index),
+              onMouseLeave: () => setHoveredIndex(null),
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                style: {
+                  width: "20px",
+                  display: "flex",
+                  justifyContent: "center",
+                  marginRight: "10px"
+                },
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+                  icon: link.icon,
+                  style: {
+                    color: hoveredIndex === index ? "var(--primary-color, #222f67)" : "#6c757d",
+                    fontSize: "14px",
+                    transition: "color 0.2s ease"
+                  },
+                  "aria-hidden": "true"
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+                component: "div",
+                sx: {
+                  color: hoveredIndex === index ? "var(--primary-color, #222f67)" : "#6c757d",
+                  fontSize: "12.2px",
+                  fontWeight: "500",
+                  transition: "color 0.2s ease",
+                  lineHeight: "normal",
+                  fontFamily: WIDGET_FONT,
+                  margin: 0,
+                  padding: 0
+                },
+                children: link.title
+              })]
+            }, index))
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(BottomContent, {
+            viewingReclamations: viewingReclamations,
+            viewingTijariaHistory: viewingTijariaHistory,
+            activeChat: activeChat,
+            infoMessages: infoMessages,
+            incidentMessages: incidentMessages,
+            setViewingReclamations: setViewingReclamations,
+            setViewingTijariaHistory: setViewingTijariaHistory,
+            setActiveChat: setActiveChat,
+            setInfoMessages: setInfoMessages,
+            setIncidentMessages: setIncidentMessages
+          })]
+        })
+      })
+    }), showGuides && /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentPanel, {
+      isOpen: guidesPanelOpen,
+      onClose: () => {
+        setGuidesPanelOpen(false);
+        setGuideData(null);
+      },
+      contentData: guideData,
+      title: "Guide utilisateurs",
+      showDownloadButton: true,
+      onDownload: handlePdfGuideClick,
+      loadingDownload: loadingGuide,
+      projectCode: currentProjectCode,
+      guideBaseUrl: guideBaseUrl
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentPanel, {
+      isOpen: faqPanelOpen,
+      onClose: () => {
+        setFaqPanelOpen(false);
+        setFaqData(null);
+      },
+      contentData: faqData,
+      title: "Foire aux questions",
+      showDownloadButton: false,
+      showExternalLinkLabel: true,
+      externalLinkUrl: "https://www.portnet.ma/faq"
+    }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "help-widget-overlay",
+      onClick: () => setIsOpen(false),
+      style: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        width: "100vw",
+        height: "100vh",
+        backgroundColor: "rgba(0, 0, 0, 0.3)",
+        zIndex: 999
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Popover, {
+      open: contactUsMenuOpen,
+      anchorEl: contactUsMenuAnchor,
+      onClose: handleContactUsMenuClose,
+      anchorReference: "anchorPosition",
+      anchorPosition: {
+        top: popupPosition.y,
+        left: popupPosition.x
+      },
+      PaperProps: {
+        ref: contactPopoverRef,
+        elevation: 8,
+        sx: {
+          minWidth: 280,
+          borderRadius: 3,
+          overflow: "visible",
+          boxShadow: "0 8px 32px rgba(0,0,0,0.12)"
+        },
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": "contact-title"
+      },
+      TransitionProps: {
+        timeout: 300
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "draggable-handle",
+        onMouseDown: handleMouseDown,
+        style: {
+          padding: "16px 20px",
+          borderBottom: "1px solid #e0e0e0",
+          cursor: "move",
+          userSelect: "none",
+          backgroundColor: "#f8f9fa",
+          borderTopLeftRadius: "12px",
+          borderTopRightRadius: "12px",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          position: "relative"
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "8px"
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+            component: "div",
+            id: "contact-title",
+            sx: {
+              fontWeight: "600",
+              fontSize: "15px",
+              color: "#333",
+              fontFamily: WIDGET_FONT,
+              margin: 0,
+              padding: 0,
+              lineHeight: "normal"
+            },
+            children: "Contactez-nous"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          onClick: handleContactUsMenuClose,
+          "aria-label": "Fermer",
+          tabIndex: 0,
+          style: {
+            cursor: "pointer",
+            padding: "4px",
+            borderRadius: "4px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            transition: "background-color 0.2s",
+            position: "absolute",
+            right: "16px",
+            background: "none",
+            border: "none"
+          },
+          onMouseEnter: e => e.currentTarget.style.backgroundColor = "#e0e0e0",
+          onMouseLeave: e => e.currentTarget.style.backgroundColor = "transparent",
+          onFocus: e => {
+            e.currentTarget.style.backgroundColor = "#e0e0e0";
+            e.currentTarget.style.outline = "2px solid var(--primary-color, #222f67)";
+            e.currentTarget.style.outlineOffset = "2px";
+          },
+          onBlur: e => {
+            e.currentTarget.style.backgroundColor = "transparent";
+            e.currentTarget.style.outline = "none";
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+            icon: _freeSolidSvgIcons.faTimes,
+            style: {
+              fontSize: "14px",
+              color: "#666"
+            },
+            "aria-hidden": "true"
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        style: {
+          padding: "8px"
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+          onClick: handleContactClick,
+          onKeyDown: e => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleContactClick();
+            }
+          },
+          tabIndex: 0,
+          sx: {
+            borderRadius: 1,
+            mb: 0.5,
+            py: 1.5,
+            "&:hover": {
+              backgroundColor: "var(--primary-alpha-8, rgba(34, 47, 103, 0.08))"
+            },
+            "&:focus": {
+              backgroundColor: "var(--primary-alpha-8, rgba(34, 47, 103, 0.08))",
+              outline: "2px solid var(--primary-color, #222f67)",
+              outlineOffset: "2px"
+            }
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Email, {
+              fontSize: "small",
+              sx: {
+                color: "var(--primary-color, #222f67)"
+              },
+              "aria-hidden": "true"
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
+            primary: "Contacter le support",
+            secondary: "Envoyez-nous un email",
+            primaryTypographyProps: {
+              fontSize: "14px",
+              fontWeight: "500"
+            },
+            secondaryTypographyProps: {
+              fontSize: "12px"
+            }
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+          onClick: () => {
+            window.open("tel:+212520473100", "_self");
+            handleContactUsMenuClose();
+          },
+          onKeyDown: e => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              window.open("tel:+212520473100", "_self");
+              handleContactUsMenuClose();
+            }
+          },
+          tabIndex: 0,
+          sx: {
+            borderRadius: 1,
+            mb: 0.5,
+            py: 1.5,
+            "&:hover": {
+              backgroundColor: "var(--primary-alpha-8, rgba(34, 47, 103, 0.08))"
+            },
+            "&:focus": {
+              backgroundColor: "var(--primary-alpha-8, rgba(34, 47, 103, 0.08))",
+              outline: "2px solid var(--primary-color, #222f67)",
+              outlineOffset: "2px"
+            }
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Phone, {
+              fontSize: "small",
+              sx: {
+                color: "var(--primary-color, #222f67)"
+              },
+              "aria-hidden": "true"
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
+            primary: "Assistance t\xE9l\xE9phonique",
+            secondary: "+212 520 47 31 00",
+            primaryTypographyProps: {
+              fontSize: "14px",
+              fontWeight: "500"
+            },
+            secondaryTypographyProps: {
+              fontSize: "12px"
+            }
+          })]
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ReclamationFormModal, {
+      open: reclamationModalOpen,
+      onClose: () => setReclamationModalOpen(false)
+    })]
+  });
+};
+var _default = exports.default = PuiHelpWidget;