@portnet/ui 5.0.32 → 6.0.1

package/dist/components/widgets/PuiHelpWidget.js

@@ -1,4276 +0,0 @@
-"use strict";
-
-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.regexp.exec.js");
-require("core-js/modules/es.regexp.test.js");
-require("core-js/modules/es.string.includes.js");
-require("core-js/modules/es.string.replace.js");
-require("core-js/modules/es.string.split.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.for-each.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 _dompurify = _interopRequireDefault(require("dompurify"));
-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 PHONE_RE = /^(0|\+212|0212)[5-7]\d{8}$/;
-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 {
-    showTijaria,
-    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
-    });
-  }
-  if (!showTijaria) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      style: {
-        flex: 1
-      }
-    });
-  }
-  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 => {
-  var _formData$service;
-  let {
-    open,
-    onClose
-  } = _ref4;
-  const [activeStep, setActiveStep] = (0, _react.useState)(0);
-  const [formData, setFormData] = (0, _react.useState)({
-    type: "",
-    service: "",
-    nature: "",
-    objet: "",
-    sujet: "",
-    telephone: "",
-    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 {
-    data: listNatureReclamation,
-    isFetching: isFetchingListNatureReclamation
-  } = (0, _useReclamation.useListNatureReclamation)((_formData$service = formData.service) === null || _formData$service === void 0 ? void 0 : _formData$service.codigo);
-  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"]
-  };
-  const dialogContentRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(() => {
-    if (dialogContentRef.current) {
-      dialogContentRef.current.scrollTop = 0;
-    }
-  }, [activeStep]);
-  (0, _react.useEffect)(() => {
-    if (!open) {
-      setTimeout(() => {
-        setActiveStep(0);
-        setFormData({
-          type: "",
-          service: "",
-          objet: "",
-          sujet: "",
-          files: []
-        });
-        setSubmitted(false);
-        setReferenceNumber("");
-      }, 300);
-    }
-  }, [open]);
-  (0, _react.useEffect)(() => {
-    setFormData(prev => _objectSpread(_objectSpread({}, prev), {}, {
-      nature: ""
-    }));
-  }, [formData.service]);
-  (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 !== "" && formData.nature !== "";
-  const canSubmit = formData.objet && formData.sujet && PHONE_RE.test(formData.telephone.replace(/[\s.-]/g, ""));
-  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.jsxs)(_material.Box, {
-              sx: {
-                display: "flex",
-                flexDirection: "column",
-                gap: 3
-              },
-              children: [/*#__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,
-                noOptionsText: "Aucun service trouv\xE9",
-                className: "service-autocomplete"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Autocomplete, {
-                options: listNatureReclamation || [],
-                loading: isFetchingListNatureReclamation,
-                value: formData.nature || "",
-                disabled: !formData.service,
-                onChange: (e, value) => setFormData(prev => _objectSpread(_objectSpread({}, prev), {}, {
-                  nature: value
-                })),
-                getOptionLabel: option => (option === null || option === void 0 ? void 0 : option.libelle) || "",
-                renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, _objectSpread(_objectSpread({}, params), {}, {
-                  label: "Nature de la demande",
-                  placeholder: formData.service ? "Commencez à taper..." : "Sélectionnez d'abord un service",
-                  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,
-                noOptionsText: "Aucune nature trouv\xE9e",
-                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: [/*#__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: "T\xE9l\xE9phone",
-                value: formData.telephone,
-                onChange: e => setFormData(prev => _objectSpread(_objectSpread({}, prev), {}, {
-                  telephone: e.target.value
-                })),
-                error: Boolean(formData.telephone) && !PHONE_RE.test(formData.telephone.replace(/[\s.-]/g, "")),
-                helperText: "Format : 06 61 00 00 00, +212 6 61 00 00 00 ou 0212 6 61 00 00 00.",
-                variant: "outlined",
-                className: "form-field"
-              }), /*#__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",
-                sx: {
-                  mb: 3
-                },
-                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)"
-                  })
-                }), error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Alert, {
-                  ref: errorRef,
-                  severity: "error",
-                  onClose: () => setError(null),
-                  style: {
-                    marginTop: "12px"
-                  },
-                  children: error
-                }), 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 demande d'assistance"
-          }), /*#__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, {
-      ref: dialogContentRef,
-      className: "modal-content",
-      style: {
-        overflow: activeStep === 1 ? "visible" : "auto"
-      },
-      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, _selectedReclamation$3;
-  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 STATUT_REPONDUE = "REPONDUE";
-  const STATUT_EN_ATTENTE_COMPLEMENT = "EN_ATTENTE_COMPLEMENT";
-  const STATUT_COLOR_MAP = {
-    EN_ATTENTE: "#2196F3",
-    EN_COURS: "#FF9800",
-    REPONDUE: "#9C27B0",
-    REOUVERTE: "#FF5722",
-    CLOTUREE: "#4CAF50",
-    TRAITE: "#4CAF50"
-  };
-  const STATUT_ICON_MAP = {
-    EN_ATTENTE: "🕐",
-    EN_COURS: "⚙️",
-    REPONDUE: "💬",
-    REOUVERTE: "🔄",
-    CLOTUREE: "🔒"
-  };
-  const getStatusColorByCode = code => STATUT_COLOR_MAP[(code || "").toUpperCase()] || "#757575";
-  const [reouvreDialogOpen, setReouvreDialogOpen] = (0, _react.useState)(false);
-  const [reouvreDescription, setReouvreDescription] = (0, _react.useState)("");
-  const [reouvreFiles, setReouvreFiles] = (0, _react.useState)([]);
-  const reouvreFileInputRef = (0, _react.useRef)(null);
-  const {
-    data: reclamations,
-    isFetching,
-    error
-  } = (0, _useReclamation.useListReclamation)(page, searchKey);
-  const {
-    mutate: downloadDocument,
-    isLoading: isDownloading,
-    error: errorDownloadDocument
-  } = (0, _useReclamation.useDownloadDocument)();
-  const {
-    mutate: clotureReclamation,
-    isLoading: isCloturing
-  } = (0, _useReclamation.useClotureReclamation)();
-  const {
-    mutate: reouvreReclamation,
-    isLoading: isReouvring
-  } = (0, _useReclamation.useReouvreReclamation)();
-  const getStatusColor = statut => {
-    switch ((statut || "").toLowerCase()) {
-      case "traité":
-      case "cloturee":
-        return "#4CAF50";
-      case "en cours":
-        return "#FF9800";
-      case "en attente":
-        return "#2196F3";
-      case "repondue":
-        return "#9C27B0";
-      case "reouverte":
-        return "#FF5722";
-      default:
-        return "#757575";
-    }
-  };
-  const URL_RE = /(https?:\/\/[^\s)]+)/g;
-  const renderTextWithLinks = text => {
-    if (!text) return null;
-    const parts = text.split(URL_RE);
-    return parts.map((part, i) => /^https?:\/\//.test(part) ? /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
-      href: part,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      style: {
-        color: "var(--primary-color, #222f67)",
-        fontWeight: 600,
-        textDecoration: "underline",
-        wordBreak: "break-all"
-      },
-      children: part
-    }, i) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      children: part
-    }, i));
-  };
-  const isHtml = str => /<\/?[a-z][\s\S]*>/i.test(str);
-  const handleReclamationClick = reclamation => {
-    setSelectedReclamation(reclamation);
-    setDetailsDialogOpen(true);
-  };
-  const handleCloseDetails = () => {
-    setDetailsDialogOpen(false);
-    setSelectedReclamation(null);
-  };
-  const handleCloturer = () => {
-    if (!(selectedReclamation !== null && selectedReclamation !== void 0 && selectedReclamation.id)) return;
-    clotureReclamation(selectedReclamation.id, {
-      onSuccess: () => {
-        queryClient.invalidateQueries("reclamations");
-        handleCloseDetails();
-        _reactToastify.toast.success("Réclamation clôturée avec succès.");
-      },
-      onError: err => {
-        var _err$response$data$me2, _err$response2;
-        const msg = (_err$response$data$me2 = (_err$response2 = err.response) === null || _err$response2 === void 0 || (_err$response2 = _err$response2.data) === null || _err$response2 === void 0 ? void 0 : _err$response2.message) !== null && _err$response$data$me2 !== void 0 ? _err$response$data$me2 : "Une erreur est survenue lors de la clôture.";
-        _reactToastify.toast.error(msg);
-      }
-    });
-  };
-  const handleOpenReouvreDialog = () => {
-    setReouvreDescription("");
-    setReouvreFiles([]);
-    setReouvreDialogOpen(true);
-  };
-  const handleCloseReouvreDialog = () => {
-    setReouvreDialogOpen(false);
-    setReouvreDescription("");
-    setReouvreFiles([]);
-  };
-  const handleReouvreFileSelect = e => {
-    const selected = Array.from(e.target.files);
-    setReouvreFiles(prev => [...prev, ...selected]);
-    e.target.value = "";
-  };
-  const handleRemoveReouvreFile = index => {
-    setReouvreFiles(prev => prev.filter((_, i) => i !== index));
-  };
-  const handleSubmitReouvreture = () => {
-    if (!(selectedReclamation !== null && selectedReclamation !== void 0 && selectedReclamation.id) || !reouvreDescription.trim()) return;
-    const formData = new FormData();
-    formData.append("description", reouvreDescription.trim());
-    reouvreFiles.forEach(file => formData.append("files", file));
-    reouvreReclamation({
-      id: selectedReclamation.id,
-      formData
-    }, {
-      onSuccess: () => {
-        queryClient.invalidateQueries("reclamations");
-        handleCloseReouvreDialog();
-        handleCloseDetails();
-        _reactToastify.toast.success((selectedReclamation === null || selectedReclamation === void 0 ? void 0 : selectedReclamation.statutCode) === STATUT_EN_ATTENTE_COMPLEMENT ? "Compléments ajoutés avec succès." : "Réclamation réouverte avec succès.");
-      },
-      onError: err => {
-        var _err$response$data$me3, _err$response3;
-        const msg = (_err$response$data$me3 = (_err$response3 = err.response) === null || _err$response3 === void 0 || (_err$response3 = _err$response3.data) === null || _err$response3 === void 0 ? void 0 : _err$response3.message) !== null && _err$response$data$me3 !== void 0 ? _err$response$data$me3 : (selectedReclamation === null || selectedReclamation === void 0 ? void 0 : selectedReclamation.statutCode) === STATUT_EN_ATTENTE_COMPLEMENT ? "Une erreur est survenue lors de l'ajout des compléments." : "Une erreur est survenue lors de la réouverture.";
-        _reactToastify.toast.error(msg);
-      }
-    });
-  };
-  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 = () => {
-    setPage(1);
-    setSearchKey(search);
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      style: {
-        flex: 1,
-        display: "flex",
-        flexDirection: "column",
-        backgroundColor: "#f5f5f5",
-        minHeight: 0
-      },
-      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 demandes d'assistance"
-            }), /*#__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",
-          minHeight: 0
-        },
-        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: "Nature de la 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.nature
-            })]
-          }), /*#__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: renderTextWithLinks(selectedReclamation === null || selectedReclamation === void 0 ? void 0 : selectedReclamation.description)
-            })]
-          }), /*#__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))
-            })]
-          }), (selectedReclamation === null || selectedReclamation === void 0 || (_selectedReclamation$3 = selectedReclamation.statusHistories) === null || _selectedReclamation$3 === void 0 ? void 0 : _selectedReclamation$3.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              style: {
-                fontSize: "11px",
-                color: "#999",
-                fontWeight: "600",
-                marginBottom: "16px",
-                textTransform: "uppercase",
-                letterSpacing: "0.5px",
-                fontFamily: WIDGET_FONT
-              },
-              children: "Historique des statuts"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-              style: {
-                position: "relative",
-                paddingLeft: "24px"
-              },
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                style: {
-                  position: "absolute",
-                  left: "8px",
-                  top: "6px",
-                  bottom: "6px",
-                  width: "2px",
-                  backgroundColor: "#e0e0e0"
-                }
-              }), selectedReclamation.statusHistories.map((entry, index) => {
-                var _entry$documents;
-                const color = getStatusColorByCode(entry.statutApresCode);
-                const isLast = index === selectedReclamation.statusHistories.length - 1;
-                return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-                  style: {
-                    position: "relative",
-                    marginBottom: isLast ? 0 : "20px"
-                  },
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                    style: {
-                      position: "absolute",
-                      left: "-20px",
-                      top: "4px",
-                      width: "12px",
-                      height: "12px",
-                      borderRadius: "50%",
-                      backgroundColor: color,
-                      border: "2px solid white",
-                      boxShadow: "0 0 0 2px ".concat(color)
-                    }
-                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-                    style: {
-                      backgroundColor: "#f8f9fa",
-                      borderRadius: "8px",
-                      border: "1px solid ".concat(color, "22"),
-                      padding: "12px"
-                    },
-                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                      style: {
-                        display: "flex",
-                        justifyContent: "space-between",
-                        alignItems: "flex-start",
-                        marginBottom: entry.commentaire ? "10px" : 0
-                      },
-                      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-                        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-                          style: {
-                            display: "flex",
-                            alignItems: "center",
-                            gap: "6px",
-                            marginBottom: "2px"
-                          },
-                          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                            style: {
-                              fontSize: "11px"
-                            },
-                            children: STATUT_ICON_MAP[entry.statutApresCode] || "📋"
-                          }), entry.statutAvantCode && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-                            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                              style: {
-                                fontSize: "11px",
-                                color: getStatusColorByCode(entry.statutAvantCode),
-                                fontWeight: "600",
-                                fontFamily: WIDGET_FONT
-                              },
-                              children: entry.statutAvantLibelle
-                            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                              style: {
-                                fontSize: "11px",
-                                color: "#999"
-                              },
-                              children: "\u2192"
-                            })]
-                          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                            style: {
-                              fontSize: "11px",
-                              color,
-                              fontWeight: "700",
-                              fontFamily: WIDGET_FONT
-                            },
-                            children: entry.statutApresLibelle
-                          })]
-                        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-                          style: {
-                            fontSize: "11px",
-                            color: "#999",
-                            fontFamily: WIDGET_FONT
-                          },
-                          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-                            children: [entry.changedByNom ? entry.changedByNom : "Service Odoo", " ", "\xB7", " "]
-                          }), formatDate(entry.dateChangement)]
-                        })]
-                      })
-                    }), entry.commentaire && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                      style: {
-                        fontSize: "13px",
-                        color: "#333",
-                        lineHeight: "1.5",
-                        fontFamily: WIDGET_FONT,
-                        backgroundColor: "white",
-                        padding: "8px 10px",
-                        borderRadius: "6px",
-                        border: "1px solid #e0e0e0",
-                        whiteSpace: "pre-line"
-                      },
-                      children: renderTextWithLinks(entry.commentaire)
-                    }), entry.reponse && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-                      style: {
-                        marginTop: "8px",
-                        fontSize: "13px",
-                        color: "#333",
-                        lineHeight: "1.5",
-                        fontFamily: WIDGET_FONT,
-                        backgroundColor: "#f0f4ff",
-                        padding: "8px 10px",
-                        borderRadius: "6px",
-                        border: "1px solid #c5d0f0",
-                        whiteSpace: "pre-line"
-                      },
-                      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                        style: {
-                          fontSize: "11px",
-                          fontWeight: "600",
-                          color: "#555",
-                          display: "block",
-                          marginBottom: "4px"
-                        },
-                        children: "\uD83D\uDCAC R\xE9ponse"
-                      }), isHtml(entry.reponse) ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                        style: {
-                          whiteSpace: "normal"
-                        },
-                        dangerouslySetInnerHTML: {
-                          __html: _dompurify.default.sanitize(entry.reponse)
-                        }
-                      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                        style: {
-                          whiteSpace: "pre-line"
-                        },
-                        children: renderTextWithLinks(entry.reponse)
-                      })]
-                    }), ((_entry$documents = entry.documents) === null || _entry$documents === void 0 ? void 0 : _entry$documents.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                      style: {
-                        marginTop: "8px",
-                        display: "flex",
-                        flexDirection: "column",
-                        gap: "6px"
-                      },
-                      children: entry.documents.map((doc, di) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-                        style: {
-                          display: "flex",
-                          alignItems: "center",
-                          gap: "8px",
-                          padding: "6px 10px",
-                          backgroundColor: "white",
-                          borderRadius: "6px",
-                          border: "1px solid #e0e0e0",
-                          cursor: isDownloading ? "not-allowed" : "pointer",
-                          opacity: isDownloading ? 0.6 : 1
-                        },
-                        onClick: () => !isDownloading && handleDownload(doc.documentGuid, doc.documentName),
-                        onMouseEnter: e => {
-                          if (!isDownloading) e.currentTarget.style.backgroundColor = "#f0f0f0";
-                        },
-                        onMouseLeave: e => {
-                          if (!isDownloading) e.currentTarget.style.backgroundColor = "white";
-                        },
-                        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-                          icon: _freeSolidSvgIcons.faPaperclip,
-                          style: {
-                            color: "var(--primary-color, #222f67)",
-                            fontSize: "12px"
-                          }
-                        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                          style: {
-                            flex: 1,
-                            fontSize: "12px",
-                            color: "#333",
-                            fontFamily: WIDGET_FONT
-                          },
-                          children: doc.documentName
-                        }), isDownloading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {
-                          size: 12,
-                          style: {
-                            color: "var(--primary-color, #222f67)"
-                          }
-                        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-                          icon: _freeSolidSvgIcons.faDownload,
-                          style: {
-                            color: "var(--primary-color, #222f67)",
-                            fontSize: "12px"
-                          }
-                        })]
-                      }, doc.id || di))
-                    })]
-                  })]
-                }, entry.id || index);
-              })]
-            })]
-          })]
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.DialogActions, {
-        sx: {
-          padding: "16px 24px",
-          borderTop: "1px solid #e0e0e0",
-          backgroundColor: "#f8f9fa",
-          gap: "8px"
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
-          onClick: handleCloseDetails,
-          variant: "outlined",
-          sx: {
-            color: "var(--primary-color, #222f67)",
-            borderColor: "var(--primary-color, #222f67)",
-            padding: "5.5px 23px",
-            borderRadius: "6px",
-            fontWeight: "500",
-            fontSize: "14px",
-            textTransform: "none",
-            boxShadow: "none",
-            "&:hover": {
-              borderColor: "var(--primary-color, #222f67)",
-              backgroundColor: "rgba(34, 47, 103, 0.05)",
-              boxShadow: "none"
-            }
-          },
-          children: "Fermer"
-        }), (selectedReclamation === null || selectedReclamation === void 0 ? void 0 : selectedReclamation.statutCode) === STATUT_REPONDUE && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
-            variant: "contained",
-            onClick: handleCloturer,
-            disabled: isCloturing,
-            sx: {
-              backgroundColor: "#e53935",
-              color: "white",
-              padding: "5.5px 23px",
-              borderRadius: "6px",
-              fontWeight: "500",
-              fontSize: "14px",
-              textTransform: "none",
-              boxShadow: "none",
-              "&:hover": {
-                backgroundColor: "#c62828",
-                boxShadow: "none"
-              },
-              "&:disabled": {
-                backgroundColor: "#ef9a9a",
-                boxShadow: "none"
-              }
-            },
-            children: isCloturing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {
-              size: 16,
-              sx: {
-                color: "white"
-              }
-            }) : "Clôturer"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
-            variant: "contained",
-            onClick: handleOpenReouvreDialog,
-            sx: {
-              backgroundColor: "var(--primary-color, #222f67)",
-              color: "white",
-              padding: "5.5px 23px",
-              borderRadius: "6px",
-              fontWeight: "500",
-              fontSize: "14px",
-              textTransform: "none",
-              boxShadow: "none",
-              "&:hover": {
-                backgroundColor: "var(--secondary-color, #2d3d7f)",
-                boxShadow: "none"
-              }
-            },
-            children: "R\xE9ouverture"
-          })]
-        }), (selectedReclamation === null || selectedReclamation === void 0 ? void 0 : selectedReclamation.statutCode) === STATUT_EN_ATTENTE_COMPLEMENT && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
-          variant: "contained",
-          onClick: handleOpenReouvreDialog,
-          sx: {
-            backgroundColor: "var(--primary-color, #222f67)",
-            color: "white",
-            padding: "5.5px 23px",
-            borderRadius: "6px",
-            fontWeight: "500",
-            fontSize: "14px",
-            textTransform: "none",
-            boxShadow: "none",
-            "&:hover": {
-              backgroundColor: "var(--secondary-color, #2d3d7f)",
-              boxShadow: "none"
-            }
-          },
-          children: "Ajouter compl\xE9ments"
-        })]
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Dialog, {
-      open: reouvreDialogOpen,
-      onClose: handleCloseReouvreDialog,
-      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.faReply,
-            style: {
-              color: "var(--primary-color, #222f67)",
-              fontSize: "18px"
-            }
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-              component: "div",
-              sx: {
-                fontWeight: "700",
-                fontSize: "16px",
-                margin: 0
-              },
-              children: (selectedReclamation === null || selectedReclamation === void 0 ? void 0 : selectedReclamation.statutCode) === STATUT_EN_ATTENTE_COMPLEMENT ? "Ajout de compléments" : "Réouverture de la réclamation"
-            }), /*#__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.IconButton, {
-          onClick: handleCloseReouvreDialog,
-          size: "small",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Close, {
-            fontSize: "small"
-          })
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.DialogContent, {
-        sx: {
-          padding: "24px",
-          display: "flex",
-          flexDirection: "column",
-          gap: "20px"
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
-          label: (selectedReclamation === null || selectedReclamation === void 0 ? void 0 : selectedReclamation.statutCode) === STATUT_EN_ATTENTE_COMPLEMENT ? "Compléments" : "Description",
-          placeholder: (selectedReclamation === null || selectedReclamation === void 0 ? void 0 : selectedReclamation.statutCode) === STATUT_EN_ATTENTE_COMPLEMENT ? "Saisissez les compléments..." : "Décrivez la raison de la réouverture...",
-          value: reouvreDescription,
-          onChange: e => setReouvreDescription(e.target.value),
-          multiline: true,
-          rows: 5,
-          fullWidth: true,
-          required: true,
-          variant: "outlined",
-          inputProps: {
-            maxLength: 500
-          },
-          sx: {
-            mt: 1,
-            "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
-              borderColor: "var(--primary-color, #222f67)"
-            },
-            "& .MuiInputLabel-root.Mui-focused": {
-              color: "var(--primary-color, #222f67)"
-            }
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-            type: "file",
-            ref: reouvreFileInputRef,
-            style: {
-              display: "none"
-            },
-            onChange: handleReouvreFileSelect,
-            accept: ".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif",
-            multiple: true
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
-            variant: "outlined",
-            startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.AttachFile, {}),
-            onClick: () => {
-              var _reouvreFileInputRef$;
-              return (_reouvreFileInputRef$ = reouvreFileInputRef.current) === null || _reouvreFileInputRef$ === void 0 ? void 0 : _reouvreFileInputRef$.click();
-            },
-            sx: {
-              borderRadius: "8px",
-              border: "2px dashed var(--primary-color, #222f67)",
-              color: "var(--primary-color, #222f67)",
-              fontWeight: "600",
-              textTransform: "none",
-              width: "100%",
-              "&:hover": {
-                backgroundColor: "rgba(34, 47, 103, 0.05)",
-                borderStyle: "solid"
-              }
-            },
-            children: "Pi\xE8ces jointes (optionnel)"
-          }), reouvreFiles.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-            sx: {
-              mt: 1,
-              display: "flex",
-              flexWrap: "wrap",
-              gap: 1
-            },
-            children: reouvreFiles.map((file, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Chip, {
-              icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.AttachFile, {}),
-              label: file.name,
-              onDelete: () => handleRemoveReouvreFile(index),
-              sx: {
-                borderRadius: "8px"
-              },
-              color: "primary",
-              variant: "outlined"
-            }, index))
-          })]
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.DialogActions, {
-        sx: {
-          padding: "16px 24px",
-          borderTop: "1px solid #e0e0e0",
-          backgroundColor: "#f8f9fa",
-          gap: "8px"
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
-          onClick: handleCloseReouvreDialog,
-          variant: "outlined",
-          sx: {
-            color: "var(--primary-color, #222f67)",
-            borderColor: "var(--primary-color, #222f67)",
-            padding: "5.5px 23px",
-            borderRadius: "6px",
-            fontWeight: "500",
-            fontSize: "14px",
-            textTransform: "none",
-            boxShadow: "none",
-            "&:hover": {
-              borderColor: "var(--primary-color, #222f67)",
-              backgroundColor: "rgba(34, 47, 103, 0.05)",
-              boxShadow: "none"
-            }
-          },
-          children: "Annuler"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
-          variant: "contained",
-          onClick: handleSubmitReouvreture,
-          disabled: !reouvreDescription.trim() || isReouvring,
-          sx: {
-            backgroundColor: "var(--primary-color, #222f67)",
-            color: "white",
-            padding: "5.5px 23px",
-            borderRadius: "6px",
-            fontWeight: "500",
-            fontSize: "14px",
-            textTransform: "none",
-            boxShadow: "none",
-            "&:hover": {
-              backgroundColor: "var(--secondary-color, #2d3d7f)",
-              boxShadow: "none"
-            },
-            "&:disabled": {
-              backgroundColor: "rgba(34, 47, 103, 0.4)",
-              boxShadow: "none"
-            }
-          },
-          children: isReouvring ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {
-            size: 16,
-            sx: {
-              color: "white"
-            }
-          }) : (selectedReclamation === null || selectedReclamation === void 0 ? void 0 : selectedReclamation.statutCode) === STATUT_EN_ATTENTE_COMPLEMENT ? "Confirmer" : "Confirmer la réouverture"
-        })]
-      })]
-    })]
-  });
-};
-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,
-    showTijaria = true,
-    currentProjectCode = null,
-    guideBaseUrl
-  } = _ref7;
-  const [dropdownOpen, setDropdownOpen] = (0, _react.useState)(false);
-  const [isTourActive, setIsTourActive] = (0, _react.useState)(false);
-  const {
-    guideApi
-  } = (0, _PuiHelpWidgetContext.useHelpWidget)();
-  const queryClient = (0, _reactQuery.useQueryClient)();
-  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)(() => {
-    const openNouvelleReclamation = () => {
-      setReclamationModalOpen(true);
-    };
-    window.addEventListener("open-nouvelle-reclamation", openNouvelleReclamation);
-    return () => {
-      window.removeEventListener("open-nouvelle-reclamation", openNouvelleReclamation);
-    };
-  }, []);
-  (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 demandes d'assistance",
-    id: "mes-reclamations",
-    action: () => {
-      queryClient.invalidateQueries("get_list_reclamation");
-      setViewingReclamations(true);
-    }
-  }, {
-    icon: _freeSolidSvgIcons.faBullhorn,
-    title: "Nouvelle demande d'assistance",
-    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);
-    },
-  },*/
-  ...(showTijaria ? [{
-    icon: _freeSolidSvgIcons.faCommentDots,
-    title: "TijarIA",
-    id: "tijaria",
-    action: () => {
-      setViewingTijariaHistory(false);
-      setViewingReclamations(false);
-    }
-  }, {
-    icon: _freeSolidSvgIcons.faComments,
-    title: "Historique TijarIA",
-    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, {
-            showTijaria: showTijaria,
-            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.jsx)("div", {
-        style: {
-          padding: "8px"
-        },
-        children: /*#__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;