@portnet/ui 2.0.7 → 2.0.8

package/dist/components/table/PuiTable.js

@@ -21,7 +21,7 @@ var _antd = require("antd");
 var _icons = require("@ant-design/icons");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["field", "headerName", "width", "renderCell", "sortable", "align"],
-  _excluded2 = ["id", "className", "sx", "elevate", "rows", "rowCount", "columns", "paginationMode", "page", "pageSize", "checkboxSelection", "loading", "stripped", "actions", "oneActionOnly", "onSelect", "onPageChange", "onPageSizeChange", "stickyColumns", "pinnedColumns", "getRowId", "onSelectionModelChange", "selectionModel", "onRowClick", "highlightHoveredRow", "stickyHeader", "hideFooter", "hideFooterPagination", "components", "componentsProps", "getRowClassName", "onActionClick"];
+  _excluded2 = ["id", "className", "sx", "elevate", "rows", "rowCount", "columns", "paginationMode", "page", "pageSize", "checkboxSelection", "loading", "load", "stripped", "actions", "oneActionOnly", "onSelect", "onPageChange", "onPageSizeChange", "stickyColumns", "pinnedColumns", "getRowId", "onSelectionModelChange", "selectionModel", "onRowClick", "highlightHoveredRow", "stickyHeader", "hideFooter", "hideFooterPagination", "components", "componentsProps", "getRowClassName", "onActionClick", "rowHeight"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -32,7 +32,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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); } // Styles personnalisés pour le tableau
-const tableCustomStyles = "\n  /* Styles g\xE9n\xE9raux du tableau - inspir\xE9 du design de r\xE9f\xE9rence */\n  .pui-table {\n    border-radius: 8px;\n    overflow: hidden;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n    background-color: #ffffff;\n  }\n  \n  .pui-table .ant-table {\n    border-radius: 8px;\n  }\n  \n  /* En-t\xEAtes de colonnes */\n  .pui-table .ant-table-thead > tr > th {\n    background-color: #f9fafb;\n    color: #374151;\n    font-weight: 600;\n    font-size: 0.875rem;\n    padding: 12px 16px;\n    border-bottom: 1px solid #e5e7eb;\n    transition: background-color 0.2s;\n  }\n  \n  .pui-table .ant-table-thead > tr > th:hover {\n    background-color: #f3f4f6;\n  }\n  \n  /* Cellules du tableau */\n  .pui-table .ant-table-tbody > tr > td {\n    padding: 12px 16px;\n    border-bottom: 1px solid #f3f4f6;\n    color: #111827;\n    font-size: 0.875rem;\n    transition: background-color 0.2s ease;\n  }\n  \n  /* Lignes altern\xE9es */\n  .pui-table .ant-table-tbody > tr:nth-child(even) > td {\n    background-color: #f9fafb;\n  }\n  \n  .pui-table .ant-table-tbody > tr:nth-child(odd) > td {\n    background-color: #ffffff;\n  }\n  \n  /* Effet de survol */\n  .pui-table .ant-table-tbody > tr:hover > td {\n    background-color: #f3f4f6 !important;\n  }\n  \n  /* Styles des lignes s\xE9lectionn\xE9es */\n  .pui-table .ant-table-tbody > tr.ant-table-row-selected > td {\n    background-color: rgba(59, 130, 246, 0.05);\n  }\n  \n  .pui-table .ant-table-tbody > tr.ant-table-row-selected:hover > td {\n    background-color: rgba(59, 130, 246, 0.1) !important;\n  }\n  \n  /* Styles des statuts */\n  .pui-table .status-badge {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 2px 8px;\n    border-radius: 9999px;\n    font-size: 0.75rem;\n    font-weight: 500;\n    line-height: 1.5;\n  }\n  \n  .pui-table .status-badge.cancelled {\n    background-color: #fee2e2;\n    color: #b91c1c;\n  }\n  \n  .pui-table .status-badge.delivered {\n    background-color: #dcfce7;\n    color: #15803d;\n  }\n  \n  .pui-table .status-badge.ready {\n    background-color: #e0f2fe;\n    color: #0369a1;\n  }\n  \n  .pui-table .status-badge.on-the-way {\n    background-color: #fef3c7;\n    color: #92400e;\n  }\n  \n  /* Pagination */\n  .pui-table-pagination {\n    padding: 12px 16px;\n    border-top: 1px solid #f3f4f6;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n  \n  .pui-table-pagination .ant-pagination {\n    margin: 0;\n  }\n  \n  .pui-table-pagination .ant-pagination-item,\n  .pui-table-pagination .ant-pagination-prev button,\n  .pui-table-pagination .ant-pagination-next button {\n    border-radius: 6px;\n    border: 1px solid #e5e7eb;\n    height: 32px;\n    min-width: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  \n  .pui-table-pagination .ant-pagination-item:hover,\n  .pui-table-pagination .ant-pagination-prev:hover button,\n  .pui-table-pagination .ant-pagination-next:hover button {\n    border-color: #d1d5db;\n    color: #4b5563;\n  }\n  \n  .pui-table-pagination .ant-pagination-item-active {\n    background-color: #3b82f6;\n    border-color: #3b82f6;\n  }\n  \n  .pui-table-pagination .ant-pagination-item-active a {\n    color: white;\n  }\n  \n  .pui-table-pagination .ant-pagination-item-active:hover {\n    background-color: #2563eb;\n    border-color: #2563eb;\n  }\n  \n  /* Styles pour la colonne d'actions */\n  .pui-table .actions-column {\n    white-space: nowrap !important;\n    overflow: visible !important;\n  }\n  \n  .pui-table .action-button {\n    padding: 4px 8px !important;\n    margin: 0 2px !important;\n    min-width: auto !important;\n    height: 28px !important;\n    line-height: 20px !important;\n    transition: all 0.2s !important;\n  }\n  \n  .pui-table .action-button:hover {\n    background-color: rgba(24, 144, 255, 0.1) !important;\n    color: #1890ff !important;\n  }\n  \n  /* Bouton Cr\xE9er */\n  .pui-create-button {\n    background-color: #3b82f6;\n    color: white;\n    border: none;\n    border-radius: 6px;\n    padding: 8px 16px;\n    font-weight: 500;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    transition: all 0.2s;\n  }\n  \n  .pui-create-button:hover {\n    background-color: #2563eb;\n  }\n  \n  /* Titre de la page */\n  .pui-table-title {\n    font-size: 1.5rem;\n    font-weight: 600;\n    color: #111827;\n    margin-bottom: 16px;\n  }\n";
+const tableCustomStyles = "\n  /* Styles g\xE9n\xE9raux du tableau - inspir\xE9 du design de r\xE9f\xE9rence */\n  .pui-table {\n    border-radius: 8px;\n    overflow: hidden;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n    background-color: #ffffff;\n  }\n  \n  .pui-table .ant-table {\n    border-radius: 8px;\n  }\n  \n  /* En-t\xEAtes de colonnes */\n  .pui-table .ant-table-thead > tr > th {\n    background-color: #f9fafb;\n    color: #374151;\n    font-weight: 600;\n    font-size: 0.875rem;\n    padding: 12px 16px;\n    border-bottom: 1px solid #e5e7eb;\n    transition: background-color 0.2s;\n  }\n  \n  .pui-table .ant-table-thead > tr > th:hover {\n    background-color: #f3f4f6;\n  }\n  \n  /* Cellules du tableau */\n  .pui-table .ant-table-tbody > tr > td {\n    padding: 12px 16px;\n    border-bottom: 1px solid #f3f4f6;\n    color: #111827;\n    font-size: 0.875rem;\n    transition: background-color 0.2s ease;\n    white-space: normal !important;\n    word-wrap: break-word !important;\n    word-break: break-word !important;\n    max-width: 300px;\n    overflow: visible;\n    line-height: 1.5;\n  }\n  \n  /* Lignes altern\xE9es */\n  .pui-table .ant-table-tbody > tr:nth-child(even) > td {\n    background-color: #f9fafb;\n  }\n  \n  .pui-table .ant-table-tbody > tr:nth-child(odd) > td {\n    background-color: #ffffff;\n  }\n  \n  /* Effet de survol */\n  .pui-table .ant-table-tbody > tr:hover > td {\n    background-color: #f3f4f6 !important;\n  }\n  \n  /* Styles des lignes s\xE9lectionn\xE9es */\n  .pui-table .ant-table-tbody > tr.ant-table-row-selected > td {\n    background-color: rgba(59, 130, 246, 0.05);\n  }\n  \n  .pui-table .ant-table-tbody > tr.ant-table-row-selected:hover > td {\n    background-color: rgba(59, 130, 246, 0.1) !important;\n  }\n  \n  /* Styles des statuts */\n  .pui-table .status-badge {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 2px 8px;\n    border-radius: 9999px;\n    font-size: 0.75rem;\n    font-weight: 500;\n    line-height: 1.5;\n  }\n  \n  .pui-table .status-badge.cancelled {\n    background-color: #fee2e2;\n    color: #b91c1c;\n  }\n  \n  .pui-table .status-badge.delivered {\n    background-color: #dcfce7;\n    color: #15803d;\n  }\n  \n  .pui-table .status-badge.ready {\n    background-color: #e0f2fe;\n    color: #0369a1;\n  }\n  \n  .pui-table .status-badge.on-the-way {\n    background-color: #fef3c7;\n    color: #92400e;\n  }\n  \n  /* Pagination */\n  .pui-table-pagination {\n    padding: 12px 16px;\n    border-top: 1px solid #f3f4f6;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n  \n  .pui-table-pagination .ant-pagination {\n    margin: 0;\n  }\n  \n  .pui-table-pagination .ant-pagination-item,\n  .pui-table-pagination .ant-pagination-prev button,\n  .pui-table-pagination .ant-pagination-next button {\n    border-radius: 6px;\n    border: 1px solid #e5e7eb;\n    height: 32px;\n    min-width: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  \n  .pui-table-pagination .ant-pagination-item:hover,\n  .pui-table-pagination .ant-pagination-prev:hover button,\n  .pui-table-pagination .ant-pagination-next:hover button {\n    border-color: #d1d5db;\n    color: #4b5563;\n  }\n  \n  .pui-table-pagination .ant-pagination-item-active {\n    background-color: #3b82f6;\n    border-color: #3b82f6;\n  }\n  \n  .pui-table-pagination .ant-pagination-item-active a {\n    color: white;\n  }\n  \n  .pui-table-pagination .ant-pagination-item-active:hover {\n    background-color: #2563eb;\n    border-color: #2563eb;\n  }\n  \n  /* Styles pour la colonne d'actions */\n  .pui-table .actions-column {\n    white-space: nowrap !important;\n    overflow: visible !important;\n  }\n  \n  .pui-table .action-button {\n    padding: 4px 8px !important;\n    margin: 0 2px !important;\n    min-width: auto !important;\n    height: 28px !important;\n    line-height: 20px !important;\n    transition: all 0.2s !important;\n  }\n  \n  .pui-table .action-button:hover {\n    background-color: rgba(24, 144, 255, 0.1) !important;\n    color: #1890ff !important;\n  }\n  \n  /* Bouton Cr\xE9er */\n  .pui-create-button {\n    background-color: #3b82f6;\n    color: white;\n    border: none;\n    border-radius: 6px;\n    padding: 8px 16px;\n    font-weight: 500;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    transition: all 0.2s;\n  }\n  \n  .pui-create-button:hover {\n    background-color: #2563eb;\n  }\n  \n  /* Titre de la page */\n  .pui-table-title {\n    font-size: 1.5rem;\n    font-weight: 600;\n    color: #111827;\n    margin-bottom: 16px;\n  }\n";
 
 // Injection des styles dans le document
 const injectStyles = () => {
@@ -171,6 +171,33 @@ const convertColumns = (columns, onActionClick, actions) => {
         align
       } = column,
       rest = _objectWithoutProperties(column, _excluded);
+
+    // Fonction de rendu par défaut pour gérer les textes longs
+    const defaultRender = (text, record) => {
+      if (text === null || text === undefined) return "-";
+      const textStr = String(text);
+      const shouldShowTooltip = textStr.length > 30;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
+        title: shouldShowTooltip ? textStr : "",
+        placement: "topLeft",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            whiteSpace: 'normal',
+            wordWrap: 'break-word',
+            wordBreak: 'break-word',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            lineHeight: '1.5',
+            maxHeight: '4.5em',
+            // Environ 3 lignes
+            display: '-webkit-box',
+            WebkitLineClamp: 3,
+            WebkitBoxOrient: 'vertical'
+          },
+          children: textStr
+        })
+      });
+    };
     return _objectSpread({
       title: headerName,
       dataIndex: field,
@@ -181,7 +208,7 @@ const convertColumns = (columns, onActionClick, actions) => {
       render: renderCell ? (text, record) => renderCell({
         row: record,
         value: text
-      }) : undefined
+      }) : defaultRender
     }, rest);
   });
 
@@ -377,6 +404,7 @@ const PuiTable = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       pageSize,
       checkboxSelection,
       loading,
+      load,
       stripped,
       actions,
       oneActionOnly,
@@ -396,7 +424,8 @@ const PuiTable = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       components,
       componentsProps,
       getRowClassName,
-      onActionClick
+      onActionClick,
+      rowHeight = 'auto'
     } = _ref3,
     rest = _objectWithoutProperties(_ref3, _excluded2);
   // Convertir les colonnes au format Ant Design
@@ -448,6 +477,12 @@ const PuiTable = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     boxShadow: '0 2px 8px rgba(0,0,0,0.07)'
   } : {}), sx || {});
 
+  // Style pour les lignes du tableau
+  const rowStyle = {
+    height: rowHeight,
+    minHeight: rowHeight === 'auto' ? '60px' : rowHeight
+  };
+
   // Injection des styles CSS personnalisés
   React.useEffect(() => {
     injectStyles();
@@ -508,7 +543,7 @@ const PuiTable = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       }
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Spin, {
-      spinning: loading,
+      spinning: loading || load,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Table, _objectSpread({
         ref: ref,
         id: id,
@@ -530,7 +565,9 @@ const PuiTable = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
           if (record.isEditing) className += ' ant-table-row-editing';
           return className;
         },
-        onRow: getRowProps
+        onRow: record => _objectSpread(_objectSpread({}, getRowProps(record)), {}, {
+          style: rowStyle
+        })
       }, rest)), !hideFooter && !hideFooterPagination && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "pui-table-pagination",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PuiTablePagination, {
@@ -569,6 +606,7 @@ PuiTable.propTypes = {
   checkboxSelection: _propTypes.default.bool,
   paginationMode: _propTypes.default.oneOf(["client", "server", "none"]),
   loading: _propTypes.default.bool,
+  load: _propTypes.default.bool,
   onSelect: _propTypes.default.func,
   onPageChange: _propTypes.default.func,
   onPageSizeChange: _propTypes.default.func,
@@ -585,7 +623,8 @@ PuiTable.propTypes = {
   components: _propTypes.default.object,
   componentsProps: _propTypes.default.object,
   getRowClassName: _propTypes.default.func,
-  onActionClick: _propTypes.default.func
+  onActionClick: _propTypes.default.func,
+  rowHeight: _propTypes.default.string
 };
 PuiTable.defaultProps = {
   oneActionOnly: false,
@@ -608,7 +647,10 @@ PuiTable.defaultProps = {
   components: null,
   componentsProps: null,
   getRowClassName: null,
-  onActionClick: null
+  onActionClick: null,
+  rowHeight: 'auto',
+  loading: false,
+  load: false
 };
 
 // Composant pour l'en-tête de la table avec titre et bouton de création

package/dist/components/ui/layout/Header.js

@@ -0,0 +1,253 @@
+"use strict";
+
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _material = require("@mui/material");
+var _iconsMaterial = require("@mui/icons-material");
+var _apperance = require("../../../config/apperance");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["title", "userName", "avatarSrc", "onLogout", "onSettingsClick", "onProfileClick", "notificationsCount", "onNotificationsClick"]; // AppBar stylisée
+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); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+const StyledAppBar = (0, _styles.styled)(_material.AppBar)(_ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    backgroundColor: _apperance.palette.white,
+    color: _apperance.palette.gray.darker,
+    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.05)',
+    position: 'fixed',
+    zIndex: 1100,
+    width: 'calc(100% - 280px)',
+    // Ajuster selon la largeur de la sidebar (280px)
+    marginLeft: '280px'
+  };
+});
+
+// Toolbar stylisée
+const StyledToolbar = (0, _styles.styled)(_material.Toolbar)({
+  display: 'flex',
+  justifyContent: 'space-between',
+  height: '64px',
+  padding: '0 16px'
+});
+
+// Conteneur pour les actions à droite
+const ActionContainer = (0, _styles.styled)(_material.Box)({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px'
+});
+
+// Icône stylisée
+const StyledIconButton = (0, _styles.styled)(_material.IconButton)({
+  color: _apperance.palette.gray.dark,
+  transition: 'all 0.2s ease',
+  '&:hover': {
+    color: _apperance.palette.primary,
+    backgroundColor: "".concat(_apperance.palette.primary, "10")
+  }
+});
+
+// Avatar stylisé
+const StyledAvatar = (0, _styles.styled)(_material.Avatar)({
+  cursor: 'pointer',
+  width: 40,
+  height: 40,
+  transition: 'all 0.2s ease',
+  border: "2px solid transparent",
+  '&:hover': {
+    borderColor: _apperance.palette.primary
+  }
+});
+
+// Menu stylisé
+const StyledMenu = (0, _styles.styled)(_material.Menu)({
+  '& .MuiPaper-root': {
+    borderRadius: '8px',
+    boxShadow: '0 4px 20px rgba(0, 0, 0, 0.1)',
+    overflow: 'hidden'
+  },
+  '& .MuiMenuItem-root': {
+    padding: '10px 16px',
+    fontSize: '0.9rem',
+    transition: 'all 0.2s ease',
+    '&:hover': {
+      backgroundColor: "".concat(_apperance.palette.primary, "10")
+    }
+  }
+});
+
+/**
+ * Composant Header - En-tête de l'application avec avatar en haut à droite
+ */
+const Header = _ref2 => {
+  let {
+      title,
+      userName,
+      avatarSrc,
+      onLogout,
+      onSettingsClick,
+      onProfileClick,
+      notificationsCount = 0,
+      onNotificationsClick
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  const [anchorEl, setAnchorEl] = _react.default.useState(null);
+  const open = Boolean(anchorEl);
+  const handleAvatarClick = event => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const handleProfileClick = () => {
+    if (onProfileClick) {
+      onProfileClick();
+    }
+    handleClose();
+  };
+  const handleSettingsClick = () => {
+    if (onSettingsClick) {
+      onSettingsClick();
+    }
+    handleClose();
+  };
+  const handleLogoutClick = () => {
+    if (onLogout) {
+      onLogout();
+    }
+    handleClose();
+  };
+
+  // Génération des initiales pour l'avatar si pas d'image
+  const getInitials = name => {
+    if (!name) return 'U';
+    return name.split(' ').map(part => part[0]).join('').toUpperCase().substring(0, 2);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledAppBar, _objectSpread(_objectSpread({}, props), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledToolbar, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        variant: "h6",
+        fontWeight: "bold",
+        children: title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ActionContainer, {
+        children: [onNotificationsClick && /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledIconButton, {
+          onClick: onNotificationsClick,
+          title: "Notifications",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Badge, {
+            badgeContent: notificationsCount,
+            color: "error",
+            max: 99,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Notifications, {})
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledAvatar, {
+          src: avatarSrc,
+          alt: userName || 'Utilisateur',
+          onClick: handleAvatarClick,
+          "aria-controls": open ? 'user-menu' : undefined,
+          "aria-haspopup": "true",
+          "aria-expanded": open ? 'true' : undefined,
+          children: !avatarSrc && getInitials(userName)
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledMenu, {
+          id: "user-menu",
+          anchorEl: anchorEl,
+          open: open,
+          onClose: handleClose,
+          MenuListProps: {
+            'aria-labelledby': 'avatar-button'
+          },
+          anchorOrigin: {
+            vertical: 'bottom',
+            horizontal: 'right'
+          },
+          transformOrigin: {
+            vertical: 'top',
+            horizontal: 'right'
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+            sx: {
+              px: 2,
+              py: 1
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              variant: "subtitle1",
+              fontWeight: "bold",
+              children: userName || 'Utilisateur'
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+            onClick: handleProfileClick,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+              display: "flex",
+              alignItems: "center",
+              gap: 1,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
+                sx: {
+                  width: 24,
+                  height: 24
+                },
+                src: avatarSrc,
+                children: !avatarSrc && getInitials(userName)
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                children: "Profil"
+              })]
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+            onClick: handleSettingsClick,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+              display: "flex",
+              alignItems: "center",
+              gap: 1,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Settings, {
+                fontSize: "small"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                children: "Param\xE8tres"
+              })]
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+            onClick: handleLogoutClick,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+              display: "flex",
+              alignItems: "center",
+              gap: 1,
+              color: "error.main",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.ExitToApp, {
+                fontSize: "small"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                children: "D\xE9connexion"
+              })]
+            })
+          })]
+        })]
+      })]
+    })
+  }));
+};
+Header.propTypes = {
+  title: _propTypes.default.string,
+  userName: _propTypes.default.string,
+  avatarSrc: _propTypes.default.string,
+  onLogout: _propTypes.default.func,
+  onSettingsClick: _propTypes.default.func,
+  onProfileClick: _propTypes.default.func,
+  notificationsCount: _propTypes.default.number,
+  onNotificationsClick: _propTypes.default.func
+};
+var _default = exports.default = Header;

package/dist/components/ui/layout/Layout.js

@@ -0,0 +1,104 @@
+"use strict";
+
+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");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _material = require("@mui/material");
+var _Sidebar = _interopRequireDefault(require("./Sidebar"));
+var _Header = _interopRequireDefault(require("./Header"));
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["children", "title", "userName", "userRole", "avatarSrc", "logoUrl", "appName", "menuItems", "activeMenuId", "onLogout", "onSettingsClick", "onProfileClick", "notificationsCount", "onNotificationsClick"]; // Conteneur principal
+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); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+const MainContainer = (0, _styles.styled)(_material.Box)({
+  display: 'flex'
+});
+
+// Conteneur du contenu
+const ContentContainer = (0, _styles.styled)(_material.Box)({
+  marginLeft: '280px',
+  // Doit correspondre à la largeur de la Sidebar
+  marginTop: '64px',
+  // Doit correspondre à la hauteur du Header
+  width: 'calc(100% - 280px)',
+  minHeight: 'calc(100vh - 64px)',
+  padding: '24px',
+  backgroundColor: '#f9fafb',
+  // Fond légèrement grisé pour le contenu
+  boxSizing: 'border-box'
+});
+
+/**
+ * Composant Layout - Structure principale de l'application
+ */
+const Layout = _ref => {
+  let {
+      children,
+      title,
+      userName,
+      userRole,
+      avatarSrc,
+      logoUrl,
+      appName,
+      menuItems,
+      activeMenuId,
+      onLogout,
+      onSettingsClick,
+      onProfileClick,
+      notificationsCount,
+      onNotificationsClick
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(MainContainer, _objectSpread(_objectSpread({}, props), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Sidebar.default, {
+      items: menuItems,
+      logoUrl: logoUrl,
+      appName: appName,
+      userName: userName,
+      userRole: userRole,
+      onLogout: onLogout,
+      activeItemId: activeMenuId
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header.default, {
+      title: title,
+      userName: userName,
+      avatarSrc: avatarSrc,
+      onLogout: onLogout,
+      onSettingsClick: onSettingsClick,
+      onProfileClick: onProfileClick,
+      notificationsCount: notificationsCount,
+      onNotificationsClick: onNotificationsClick
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentContainer, {
+      children: children
+    })]
+  }));
+};
+Layout.propTypes = {
+  children: _propTypes.default.node,
+  title: _propTypes.default.string,
+  userName: _propTypes.default.string,
+  userRole: _propTypes.default.string,
+  avatarSrc: _propTypes.default.string,
+  logoUrl: _propTypes.default.string,
+  appName: _propTypes.default.string,
+  menuItems: _propTypes.default.array,
+  activeMenuId: _propTypes.default.string,
+  onLogout: _propTypes.default.func,
+  onSettingsClick: _propTypes.default.func,
+  onProfileClick: _propTypes.default.func,
+  notificationsCount: _propTypes.default.number,
+  onNotificationsClick: _propTypes.default.func
+};
+var _default = exports.default = Layout;