@portnet/ui 2.0.6 → 2.0.8

package/dist/components/others/PuiChip.js

@@ -1,151 +1,291 @@
 "use strict";
 
 require("core-js/modules/es.weak-map.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/web.dom-collections.iterator.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _material = require("@mui/material");
-var _styles = require("@mui/material/styles");
+exports.default = exports.PuiStatusChip = void 0;
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var React = _interopRequireWildcard(require("react"));
+var _antd = require("antd");
 var _apperance = require("../../config/apperance");
-var _PuiTooltip = _interopRequireDefault(require("./PuiTooltip"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "className", "sx", "color", "fullWidth", "children"];
+const _excluded = ["id", "className", "sx", "color", "variant", "size", "fullWidth", "children", "clickable", "onClick", "status"],
+  _excluded2 = ["status", "children"]; // Définition des états prédéfinis et leur correspondance de style
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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 }; }
-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; }
 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 StyledChip = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Chip, _objectSpread({
-  ref: ref
-}, props))))(() => {
-  return {
-    "&.MuiChip-root": {
-      height: "25px",
-      color: "white",
-      fontWeight: "600",
-      fontSize: ".7rem"
-    }
-  };
-});
-const PrimaryChip = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledChip, _objectSpread({
-  ref: ref
-}, props))))(() => {
-  return {
-    "&.MuiChip-root": {
-      backgroundColor: _apperance.palette.primary
-    }
-  };
-});
-const SecondaryChip = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledChip, _objectSpread({
-  ref: ref
-}, props))))(() => {
-  return {
-    "&.MuiChip-root": {
-      backgroundColor: _apperance.palette.secondary,
-      border: "2px solid ".concat(_apperance.palette.gray.dark),
-      color: _apperance.palette.gray.darker
-    }
-  };
-});
-const InfoChip = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledChip, _objectSpread({
-  ref: ref
-}, props))))(() => {
-  return {
-    "&.MuiChip-root": {
-      backgroundColor: _apperance.palette.info
-    }
-  };
-});
-const SuccessChip = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledChip, _objectSpread({
-  ref: ref
-}, props))))(() => {
-  return {
-    "&.MuiChip-root": {
-      backgroundColor: _apperance.palette.success
-    }
-  };
-});
-const ErrorChip = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledChip, _objectSpread({
-  ref: ref
-}, props))))(() => {
-  return {
-    "&.MuiChip-root": {
-      backgroundColor: _apperance.palette.error
-    }
-  };
-});
-const WarningChip = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledChip, _objectSpread({
-  ref: ref
-}, props))))(() => {
-  return {
-    "&.MuiChip-root": {
-      backgroundColor: _apperance.palette.warning
+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 STATUS_CONFIG = {
+  // États génériques
+  active: {
+    color: 'success',
+    label: 'Active'
+  },
+  inactive: {
+    color: 'secondary',
+    label: 'Inactive'
+  },
+  pending: {
+    color: 'warning',
+    label: 'En attente'
+  },
+  error: {
+    color: 'error',
+    label: 'Erreur'
+  },
+  // États spécifiques
+  cancelled: {
+    color: 'error',
+    label: 'Annulée'
+  },
+  payed: {
+    color: 'success',
+    label: 'Réglée'
+  },
+  pending_payment: {
+    color: 'warning',
+    label: 'Paiement en attente'
+  },
+  shipped: {
+    color: 'info',
+    label: 'Expédiée'
+  },
+  delivered: {
+    color: 'success',
+    label: 'Livrée'
+  },
+  processing: {
+    color: 'primary',
+    label: 'En traitement'
+  },
+  refunded: {
+    color: 'error',
+    label: 'Remboursée'
+  },
+  onhold: {
+    color: 'secondary',
+    label: 'En suspens'
+  },
+  completed: {
+    color: 'success',
+    label: 'Terminée'
+  }
+};
+
+// Style CSS pour le composant custom
+const chipStyles = "\n  .pui-custom-chip {\n    display: inline-block;\n    box-sizing: border-box;\n    margin: 2px;\n    padding: 4px 8px;\n    border-radius: 4px;\n    font-size: 14px;\n    line-height: 1.5;\n    font-weight: 500;\n    transition: all 0.2s;\n    max-width: 100%;\n    vertical-align: middle;\n    border: 1px solid transparent;\n  }\n  \n  .pui-custom-chip.full-width {\n    width: 100%;\n    display: block;\n  }\n  \n  .pui-custom-chip.small {\n    font-size: 12px;\n    padding: 2px 6px;\n  }\n  \n  .pui-custom-chip.medium {\n    font-size: 14px;\n    padding: 4px 8px;\n  }\n  \n  .pui-custom-chip.large {\n    font-size: 16px;\n    padding: 6px 10px;\n  }\n  \n  .pui-custom-chip-content {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: normal;\n    word-wrap: break-word;\n    word-break: break-word;\n    width: 100%;\n  }\n  \n  .pui-custom-chip.clickable {\n    cursor: pointer;\n  }\n  \n  .pui-custom-chip.clickable:hover {\n    opacity: 0.9;\n    transform: translateY(-1px);\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  }\n  \n  /* Styles sp\xE9cifiques pour les statuts */\n  .pui-status-chip {\n    font-weight: 600;\n    padding: 3px 10px;\n    border-radius: 12px;\n  }\n";
+
+// Injection des styles dans le document
+const injectStyles = () => {
+  const styleId = 'pui-custom-chip-styles';
+  if (!document.getElementById(styleId)) {
+    const styleElement = document.createElement('style');
+    styleElement.id = styleId;
+    styleElement.innerHTML = chipStyles;
+    document.head.appendChild(styleElement);
+  }
+};
+
+// Suppression des styles lors du démontage
+const removeStyles = () => {
+  const styleElement = document.getElementById('pui-custom-chip-styles');
+  if (styleElement) {
+    document.head.removeChild(styleElement);
+  }
+};
+
+// Configuration des couleurs selon la palette
+const getColorConfig = (color, variant) => {
+  var _colorConfigs$color;
+  const colorConfigs = {
+    primary: {
+      filled: {
+        color: '#fff',
+        backgroundColor: _apperance.palette.primary,
+        borderColor: _apperance.palette.primary
+      },
+      outlined: {
+        color: _apperance.palette.primary,
+        backgroundColor: 'transparent',
+        borderColor: _apperance.palette.primary
+      }
+    },
+    secondary: {
+      filled: {
+        color: _apperance.palette.gray.darker,
+        backgroundColor: _apperance.palette.secondary,
+        borderColor: _apperance.palette.gray.dark
+      },
+      outlined: {
+        color: _apperance.palette.gray.darker,
+        backgroundColor: 'transparent',
+        borderColor: _apperance.palette.gray.dark
+      }
+    },
+    info: {
+      filled: {
+        color: '#fff',
+        backgroundColor: _apperance.palette.info,
+        borderColor: _apperance.palette.info
+      },
+      outlined: {
+        color: _apperance.palette.info,
+        backgroundColor: 'transparent',
+        borderColor: _apperance.palette.info
+      }
+    },
+    success: {
+      filled: {
+        color: '#fff',
+        backgroundColor: _apperance.palette.success,
+        borderColor: _apperance.palette.success
+      },
+      outlined: {
+        color: _apperance.palette.success,
+        backgroundColor: 'transparent',
+        borderColor: _apperance.palette.success
+      }
+    },
+    warning: {
+      filled: {
+        color: '#fff',
+        backgroundColor: _apperance.palette.warning,
+        borderColor: _apperance.palette.warning
+      },
+      outlined: {
+        color: _apperance.palette.warning,
+        backgroundColor: 'transparent',
+        borderColor: _apperance.palette.warning
+      }
+    },
+    error: {
+      filled: {
+        color: '#fff',
+        backgroundColor: _apperance.palette.error,
+        borderColor: _apperance.palette.error
+      },
+      outlined: {
+        color: _apperance.palette.error,
+        backgroundColor: 'transparent',
+        borderColor: _apperance.palette.error
+      }
     }
   };
-});
-const getChipByColor = color => {
-  switch (color) {
-    case "primary":
-    default:
-      return PrimaryChip;
-    case "secondary":
-      return SecondaryChip;
-    case "success":
-      return SuccessChip;
-    case "error":
-      return ErrorChip;
-    case "info":
-      return InfoChip;
-    case "warning":
-      return WarningChip;
-  }
+  return ((_colorConfigs$color = colorConfigs[color]) === null || _colorConfigs$color === void 0 ? void 0 : _colorConfigs$color[variant]) || colorConfigs.primary.filled;
 };
-const PuiChip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const PuiChip = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
       id,
       className,
       sx,
-      color,
-      fullWidth,
-      children
+      color = "primary",
+      variant = "filled",
+      size = "medium",
+      fullWidth = false,
+      children,
+      clickable = false,
+      onClick,
+      status // Nouveau prop pour gérer les états prédéfinis
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiTooltip.default, {
-    title: children,
-    sx: {
-      width: fullWidth ? "100%" : "fit-content"
-    },
-    children: /*#__PURE__*/React.createElement(getChipByColor(color), _objectSpread({
-      ref,
-      id,
-      sx: _objectSpread(_objectSpread({}, sx), {}, {
-        width: fullWidth ? "100%" : "fit-content"
-      }),
-      className,
-      label: children
-    }, rest))
-  });
+  // Injection des styles
+  _react.default.useEffect(() => {
+    injectStyles();
+    return () => removeStyles();
+  }, []);
+
+  // Si un statut est fourni, utiliser sa configuration
+  let displayContent = children;
+  let statusColor = color;
+  if (status && STATUS_CONFIG[status]) {
+    const statusConfig = STATUS_CONFIG[status];
+    statusColor = statusConfig.color;
+    // Si aucun contenu n'est fourni, utiliser le libellé par défaut du statut
+    if (!children) {
+      displayContent = statusConfig.label;
+    }
+  }
+  const colorConfig = getColorConfig(statusColor, variant);
+  const shouldShowTooltip = typeof displayContent === 'string' && displayContent.length > 30;
+
+  // Déterminer les classes CSS
+  const chipClasses = ['pui-custom-chip', status ? 'pui-status-chip' : '', size, fullWidth ? 'full-width' : '', clickable ? 'clickable' : '', className || ''].filter(Boolean).join(' ');
+
+  // Gérer le clic
+  const handleClick = e => {
+    if (clickable && onClick) {
+      onClick(e);
+    }
+  };
+
+  // Créer le chip personnalisé
+  const chipElement = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
+    id: id,
+    ref: ref,
+    className: chipClasses,
+    style: _objectSpread(_objectSpread({}, colorConfig), sx),
+    onClick: handleClick,
+    "data-status": status || null
+  }, rest), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "pui-custom-chip-content",
+      children: displayContent
+    })
+  }));
+  return shouldShowTooltip ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
+    title: displayContent,
+    placement: "top",
+    children: chipElement
+  }) : chipElement;
 });
+
+// Composant utilitaire simplifié pour afficher un statut
+const PuiStatusChip = exports.PuiStatusChip = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+  let {
+      status,
+      children
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PuiChip, _objectSpread(_objectSpread({
+    ref: ref,
+    status: status,
+    variant: "filled"
+  }, props), {}, {
+    children: children
+  }));
+});
+PuiStatusChip.propTypes = {
+  status: _propTypes.default.oneOf(Object.keys(STATUS_CONFIG)),
+  children: _propTypes.default.node
+};
 PuiChip.propTypes = {
   id: _propTypes.default.string,
   className: _propTypes.default.string,
   sx: _propTypes.default.object,
+  color: _propTypes.default.oneOf(["primary", "secondary", "info", "success", "warning", "error"]),
+  variant: _propTypes.default.oneOf(["filled", "outlined"]),
+  size: _propTypes.default.oneOf(["small", "medium", "large"]),
   fullWidth: _propTypes.default.bool,
-  color: _propTypes.default.oneOf(["primary", "secondary", "info", "success", "warning", "error"])
+  clickable: _propTypes.default.bool,
+  onClick: _propTypes.default.func,
+  status: _propTypes.default.oneOf(Object.keys(STATUS_CONFIG))
 };
 PuiChip.defaultProps = {
-  color: "primary"
+  color: "primary",
+  variant: "filled",
+  size: "medium",
+  fullWidth: false,
+  clickable: false
 };
 var _default = exports.default = PuiChip;

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