@portnet/ui 3.1.1 → 3.1.3

package/dist/components/table/PuiModernTable.js

@@ -0,0 +1,546 @@
+"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");
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _material = require("@mui/material");
+var _styles = require("@mui/material/styles");
+var _apperance = require("../../config/apperance");
+var _PuiButton = _interopRequireDefault(require("../buttons/PuiButton"));
+var _iconsMaterial = require("@mui/icons-material");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["title", "data", "columns", "actions", "loading", "pagination", "currentPage", "totalPages", "onPageChange", "emptyMessage", "className"]; // Container principal du tableau moderne
+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 ModernTableContainer = (0, _styles.styled)(_material.Box)(() => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '16px',
+  padding: '24px',
+  backgroundColor: _apperance.palette.background.default,
+  borderRadius: '12px',
+  minHeight: '400px'
+}));
+
+// Header du tableau
+const TableHeader = (0, _styles.styled)(_material.Box)(() => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  marginBottom: '16px',
+  borderBottom: "2px solid ".concat(_apperance.palette.border.light),
+  paddingBottom: '16px'
+}));
+
+// Conteneur des cartes
+const CardsContainer = (0, _styles.styled)(_material.Box)(() => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '12px',
+  flex: 1
+}));
+
+// Card individuelle pour chaque ligne
+const TableCard = (0, _styles.styled)(_material.Box)(() => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: '16px 20px',
+  backgroundColor: _apperance.palette.background.paper,
+  borderRadius: '8px',
+  border: "1px solid ".concat(_apperance.palette.border.light),
+  boxShadow: _apperance.palette.shadow.card,
+  transition: 'all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)',
+  position: 'relative',
+  cursor: 'pointer',
+  '&:hover': {
+    transform: 'translateY(-2px)',
+    boxShadow: _apperance.palette.shadow.medium,
+    borderColor: "".concat(_apperance.palette.primary, "40"),
+    backgroundColor: "".concat(_apperance.palette.primary, "02"),
+    // Afficher les actions de cette ligne spécifique au survol
+    '& .actions-section': {
+      opacity: 1,
+      transform: 'translateX(0)',
+      transitionDelay: '0.1s'
+    },
+    // Masquer l'indicateur de points au survol
+    '& .actions-section::before': {
+      opacity: 0
+    }
+  },
+  // Responsive
+  '@media (max-width: 768px)': {
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    gap: '12px',
+    cursor: 'default',
+    '&:hover': {
+      transform: 'none' // Pas d'effet de survol sur mobile
+    }
+  }
+}));
+
+// Section des données dans la card
+const DataSection = (0, _styles.styled)(_material.Box)(() => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '24px',
+  flex: 1,
+  transition: 'all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)',
+  // Indicateur subtil d'actions disponibles
+  '.MuiBox-root:hover &': {
+    opacity: 0.7
+  },
+  '@media (max-width: 768px)': {
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    gap: '8px'
+  }
+}));
+
+// Colonne de données
+const DataColumn = (0, _styles.styled)(_material.Box)(() => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '2px',
+  minWidth: '0',
+  flex: 1
+}));
+
+// Label de colonne
+const ColumnLabel = (0, _styles.styled)(_material.Typography)(() => ({
+  fontSize: '11px',
+  fontWeight: 600,
+  color: _apperance.palette.gray[500],
+  textTransform: 'uppercase',
+  letterSpacing: '0.5px'
+}));
+
+// Valeur de colonne
+const ColumnValue = (0, _styles.styled)(_material.Typography)(() => ({
+  fontSize: '14px',
+  fontWeight: 500,
+  color: _apperance.palette.dark,
+  wordBreak: 'break-word'
+}));
+
+// Section des actions avec effet de survol
+const ActionsSection = (0, _styles.styled)(_material.Box)(() => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+  flexShrink: 0,
+  opacity: 0,
+  transform: 'translateX(10px)',
+  transition: 'all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)',
+  position: 'relative',
+  // Afficher les actions uniquement au survol de la card parent directe
+  '&:hover': {
+    opacity: 1,
+    transform: 'translateX(0)',
+    transitionDelay: '0.1s' // Délai d'apparition pour un effet plus fluide
+  },
+  // Indicateur subtil d'actions disponibles (icône menu)
+  '&::before': {
+    content: '""',
+    position: 'absolute',
+    right: '8px',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    width: '4px',
+    height: '4px',
+    borderRadius: '50%',
+    backgroundColor: _apperance.palette.gray[400],
+    opacity: 1,
+    transition: 'opacity 0.3s ease',
+    boxShadow: "\n      0 6px 0 ".concat(_apperance.palette.gray[400], ",\n      0 12px 0 ").concat(_apperance.palette.gray[400], "\n    ")
+  },
+  '.MuiBox-root:hover &::before': {
+    opacity: 0
+  },
+  '@media (max-width: 768px)': {
+    justifyContent: 'center',
+    opacity: 1,
+    // Toujours visible sur mobile
+    transform: 'translateX(0)',
+    '&::before': {
+      display: 'none' // Pas d'indicateur sur mobile
+    }
+  }
+}));
+
+// Footer avec pagination
+const TableFooter = (0, _styles.styled)(_material.Box)(() => ({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  marginTop: '16px',
+  padding: '16px 0',
+  borderTop: "1px solid ".concat(_apperance.palette.border.light)
+}));
+
+// États de statut avec couleurs
+const statusConfig = {
+  active: {
+    color: _apperance.palette.success,
+    icon: _iconsMaterial.CheckCircleRounded,
+    label: 'Actif'
+  },
+  expired: {
+    color: _apperance.palette.error,
+    icon: _iconsMaterial.ErrorRounded,
+    label: 'Expiré'
+  },
+  pending: {
+    color: _apperance.palette.warning,
+    icon: _iconsMaterial.AccessTimeRounded,
+    label: 'En attente'
+  },
+  processing: {
+    color: _apperance.palette.info,
+    icon: _iconsMaterial.RefreshRounded,
+    label: 'En cours'
+  }
+};
+
+// Types d'actions avec couleurs exactes extraites des maquettes
+const actionConfig = {
+  validate: {
+    color: 'success',
+    icon: _iconsMaterial.CheckCircleRounded,
+    label: 'Validé',
+    bgColor: _apperance.palette.actions.validate,
+    // Vert Material Design des maquettes
+    textColor: '#fff'
+  },
+  expire: {
+    color: 'error',
+    icon: _iconsMaterial.ErrorRounded,
+    label: 'Expiré',
+    bgColor: _apperance.palette.actions.expire,
+    // Rouge Material Design des maquettes
+    textColor: '#fff'
+  },
+  renew: {
+    color: 'warning',
+    icon: _iconsMaterial.RefreshRounded,
+    label: 'Renouveler',
+    bgColor: _apperance.palette.actions.renew,
+    // Orange Material Design des maquettes
+    textColor: '#fff'
+  },
+  download: {
+    color: 'info',
+    icon: _iconsMaterial.DownloadRounded,
+    label: 'Télécharger',
+    bgColor: _apperance.palette.actions.download,
+    // Bleu Material Design des maquettes
+    textColor: '#fff'
+  },
+  processing: {
+    color: 'info',
+    icon: _iconsMaterial.AccessTimeRounded,
+    label: 'En cours',
+    bgColor: _apperance.palette.actions.processing,
+    // Violet Material Design des maquettes
+    textColor: '#fff'
+  },
+  souscrit: {
+    color: 'secondary',
+    icon: _iconsMaterial.CheckCircleRounded,
+    label: 'Souscrit',
+    bgColor: _apperance.palette.actions.souscrit,
+    // Gris bleu Material Design des maquettes
+    textColor: '#fff'
+  }
+};
+
+/**
+ * Composant de tableau moderne basé sur la maquette
+ * 
+ * Fonctionnalités :
+ * - Actions visibles uniquement au survol de la ligne
+ * - Indicateur visuel subtil (3 points) quand les actions sont cachées
+ * - Transitions fluides et animations modernes
+ * - Design responsive (actions toujours visibles sur mobile)
+ */
+const PuiModernTable = _ref => {
+  let {
+      title,
+      data = [],
+      columns = [],
+      actions = [],
+      loading = false,
+      pagination = true,
+      currentPage = 1,
+      totalPages = 1,
+      onPageChange,
+      emptyMessage = "Aucune donnée disponible",
+      className = ''
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const renderColumnValue = (item, column) => {
+    if (column.render) {
+      return column.render(item[column.key], item);
+    }
+    if (column.type === 'status') {
+      const status = statusConfig[item[column.key]] || statusConfig.pending;
+      const IconComponent = status.icon;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: '6px'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
+          sx: {
+            fontSize: '16px',
+            color: status.color
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          style: {
+            color: status.color
+          },
+          children: status.label
+        })]
+      });
+    }
+    if (column.type === 'currency') {
+      return new Intl.NumberFormat('fr-FR', {
+        style: 'currency',
+        currency: 'MAD'
+      }).format(item[column.key] || 0);
+    }
+    if (column.type === 'date') {
+      return new Date(item[column.key]).toLocaleDateString('fr-FR');
+    }
+    return item[column.key] || '-';
+  };
+  const renderActions = item => {
+    return actions.map((action, index) => {
+      var _action$disabled;
+      const config = actionConfig[action.type] || actionConfig.validate;
+      const IconComponent = action.icon || config.icon;
+      const isDisabled = (_action$disabled = action.disabled) === null || _action$disabled === void 0 ? void 0 : _action$disabled.call(action, item);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiButton.default, {
+        color: "primary",
+        size: "small",
+        startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
+          sx: {
+            fontSize: '14px'
+          }
+        }),
+        onClick: () => {
+          var _action$onClick;
+          return (_action$onClick = action.onClick) === null || _action$onClick === void 0 ? void 0 : _action$onClick.call(action, item);
+        },
+        disabled: isDisabled,
+        sx: {
+          minWidth: 'auto',
+          padding: '6px 12px',
+          fontSize: '11px',
+          fontWeight: 500,
+          backgroundColor: isDisabled ? _apperance.palette.gray[300] : action.bgColor || config.bgColor,
+          color: isDisabled ? _apperance.palette.gray[500] : action.textColor || config.textColor,
+          border: 'none',
+          borderRadius: '6px',
+          textTransform: 'none',
+          '&:hover': {
+            backgroundColor: isDisabled ? _apperance.palette.gray[300] : "".concat(action.bgColor || config.bgColor, "dd"),
+            transform: isDisabled ? 'none' : 'translateY(-1px)'
+          },
+          '&:active': {
+            transform: isDisabled ? 'none' : 'translateY(0)'
+          }
+        },
+        children: action.label || config.label
+      }, index);
+    });
+  };
+  if (loading) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ModernTableContainer, _objectSpread(_objectSpread({
+      className: className
+    }, props), {}, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.LinearProgress, {
+        sx: {
+          borderRadius: '4px'
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+          textAlign: 'center',
+          py: 4
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "body2",
+          color: "textSecondary",
+          children: "Chargement des donn\xE9es..."
+        })
+      })]
+    }));
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ModernTableContainer, _objectSpread(_objectSpread({
+    className: className
+  }, props), {}, {
+    children: [title && /*#__PURE__*/(0, _jsxRuntime.jsxs)(TableHeader, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        variant: "h5",
+        sx: {
+          fontWeight: 600,
+          color: _apperance.palette.dark
+        },
+        children: title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
+        variant: "body2",
+        color: "textSecondary",
+        children: [data.length, " \xE9l\xE9ment", data.length > 1 ? 's' : '']
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(CardsContainer, {
+      children: data.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+          textAlign: 'center',
+          py: 6,
+          color: _apperance.palette.gray[500]
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "body1",
+          children: emptyMessage
+        })
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [data.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(TableCard, {
+          sx: {
+            backgroundColor: "".concat(_apperance.palette.primary, "05"),
+            borderColor: "".concat(_apperance.palette.primary, "20"),
+            cursor: 'default',
+            '&:hover': {
+              transform: 'none',
+              boxShadow: _apperance.palette.shadow.card,
+              borderColor: "".concat(_apperance.palette.primary, "20"),
+              backgroundColor: "".concat(_apperance.palette.primary, "05")
+            }
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DataSection, {
+            children: columns.map(column => /*#__PURE__*/(0, _jsxRuntime.jsxs)(DataColumn, {
+              style: {
+                flex: column.flex || 1
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ColumnLabel, {
+                sx: {
+                  fontSize: '12px',
+                  fontWeight: 700,
+                  color: _apperance.palette.primary,
+                  textTransform: 'uppercase',
+                  letterSpacing: '0.8px'
+                },
+                children: column.label
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ColumnValue, {
+                sx: {
+                  fontSize: '13px',
+                  fontWeight: 600,
+                  color: _apperance.palette.gray[600],
+                  fontStyle: 'italic'
+                },
+                children: "En-t\xEAte"
+              })]
+            }, column.key))
+          }), actions.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionsSection, {
+            className: "actions-section",
+            sx: {
+              opacity: 0.6,
+              '&::before': {
+                backgroundColor: _apperance.palette.primary,
+                boxShadow: "\n                          0 6px 0 ".concat(_apperance.palette.primary, ",\n                          0 12px 0 ").concat(_apperance.palette.primary, "\n                        ")
+              }
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              sx: {
+                fontSize: '11px',
+                fontWeight: 600,
+                color: _apperance.palette.primary,
+                textTransform: 'uppercase',
+                letterSpacing: '0.5px'
+              },
+              children: "Actions"
+            })
+          })]
+        }), data.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(TableCard, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DataSection, {
+            children: columns.map(column => /*#__PURE__*/(0, _jsxRuntime.jsx)(DataColumn, {
+              style: {
+                flex: column.flex || 1
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ColumnValue, {
+                children: renderColumnValue(item, column)
+              })
+            }, column.key))
+          }), actions.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionsSection, {
+            className: "actions-section",
+            children: renderActions(item)
+          })]
+        }, item.id || index))]
+      })
+    }), pagination && totalPages > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(TableFooter, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Pagination, {
+        count: totalPages,
+        page: currentPage,
+        onChange: (event, page) => onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(page),
+        color: "primary",
+        size: "medium",
+        showFirstButton: true,
+        showLastButton: true,
+        sx: {
+          '& .MuiPaginationItem-root': {
+            borderRadius: '6px',
+            '&.Mui-selected': {
+              backgroundColor: _apperance.palette.primary,
+              color: _apperance.palette.white,
+              '&:hover': {
+                backgroundColor: _apperance.palette.blue.dark
+              }
+            }
+          }
+        }
+      })
+    })]
+  }));
+};
+PuiModernTable.propTypes = {
+  title: _propTypes.default.string,
+  data: _propTypes.default.arrayOf(_propTypes.default.object),
+  columns: _propTypes.default.arrayOf(_propTypes.default.shape({
+    key: _propTypes.default.string.isRequired,
+    label: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['text', 'status', 'currency', 'date']),
+    flex: _propTypes.default.number,
+    render: _propTypes.default.func
+  })),
+  actions: _propTypes.default.arrayOf(_propTypes.default.shape({
+    type: _propTypes.default.oneOf(['renew', 'validate', 'expire', 'download']),
+    label: _propTypes.default.string,
+    color: _propTypes.default.oneOf(['primary', 'secondary', 'tertiary']),
+    icon: _propTypes.default.elementType,
+    onClick: _propTypes.default.func,
+    disabled: _propTypes.default.func
+  })),
+  loading: _propTypes.default.bool,
+  pagination: _propTypes.default.bool,
+  currentPage: _propTypes.default.number,
+  totalPages: _propTypes.default.number,
+  onPageChange: _propTypes.default.func,
+  emptyMessage: _propTypes.default.string,
+  className: _propTypes.default.string
+};
+var _default = exports.default = PuiModernTable;