@adiba-banking-cloud/backoffice 0.0.28 → 0.0.30

package/build/index.cjs.js/index.js

@@ -11170,7 +11170,7 @@ function requireHighcharts() {
 var highchartsExports = requireHighcharts();
 var Highcharts = /*@__PURE__*/getDefaultExportFromCjs(highchartsExports);
 
-const initChart = props => {
+const initChart$1 = props => {
   return {
     chart: {
       type: "column",
@@ -11210,8 +11210,90 @@ const initChart = props => {
   };
 };
 
-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), true).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; }
+const computeBoundary = items => {
+  return Math.ceil(Math.max(...items) * 1.1 / 10) * 10;
+};
+const computeDelta = (items, boundary) => {
+  return items.map(item => {
+    if (!boundary) return 100;
+    return boundary - item;
+  });
+};
+const parseColorToRgb = colorString => {
+  if (colorString.startsWith("#")) {
+    const hex = colorString.slice(1);
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+    return {
+      r,
+      g,
+      b
+    };
+  } else if (colorString.startsWith("rgb")) {
+    var _colorString$match;
+    const parts = (_colorString$match = colorString.match(/\d+/g)) === null || _colorString$match === void 0 ? void 0 : _colorString$match.map(Number);
+    if (parts !== null && parts !== void 0 && parts.length) return {
+      r: parts[0],
+      g: parts[1],
+      b: parts[2]
+    };
+  }
+  console.warn("Color format '".concat(colorString, "' not fully recognized. Using black as fallback."));
+  return {
+    r: 0,
+    g: 0,
+    b: 0
+  };
+};
+
+/**
+ * Creates a Highcharts linear gradient fillColor configuration for an Area/AreaSpline series.
+ * The gradient flows vertically from the baseColor (at the series line) down to the x-axis,
+ * fading to a transparent version of the baseColor.
+ *
+ * @param {string} baseColor The primary color for the gradient (e.g., '#FF0000', 'rgb(0,128,255)').
+ * @param {object} [options] Configuration options for the gradient.
+ * @param {number} [options.startOpacity=0.7] The opacity of the `baseColor` at the top (near the series line, position 0).
+ * Value should be between 0 (fully transparent) and 1 (fully opaque).
+ * @param {number} [options.endOpacity=0.0] The opacity of the transparent end color at the bottom (near the x-axis, position 1).
+ * Value should be between 0 (fully transparent) and 1 (fully opaque).
+ * @returns {Highcharts.GradientColorObject} A Highcharts `fillColor` configuration object.
+ */
+const createAreaFillGradient = function (baseColor) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const {
+    startOpacity = 0.2,
+    endOpacity = 0.08
+  } = options;
+  const parsedColor = parseColorToRgb(baseColor);
+  "rgba(".concat(parsedColor.r, ", ").concat(parsedColor.g, ", ").concat(parsedColor.b, ", 1)");
+
+  // Color string for the top of the gradient (base color with specified start opacity)
+  const rgbaStart = "rgba(".concat(parsedColor.r, ", ").concat(parsedColor.g, ", ").concat(parsedColor.b, ", ").concat(startOpacity, ")");
+
+  // Color string for the bottom of the gradient (always transparent version of base color)
+  const rgbaEnd = "rgba(".concat(parsedColor.r, ", ").concat(parsedColor.g, ", ").concat(parsedColor.b, ", ").concat(endOpacity, ")");
+  return {
+    linearGradient: {
+      x1: 0,
+      // Gradient starts at the left edge
+      y1: 0,
+      // Gradient starts at the top edge
+      x2: 0,
+      // Gradient ends at the left edge (same x as start)
+      y2: 1 // Gradient ends at the bottom edge (so it's a vertical gradient)
+    },
+    stops: [[0, rgbaStart],
+    // First stop: at the top (0% of gradient vector)
+    [0.9, rgbaEnd],
+    // Second stop: at the bottom (100% of gradient vector)
+    [1, "transparent"]]
+  };
+};
+
+function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 
 // Initialize Highcharts with rounded corners
 if (typeof window !== "undefined") {
@@ -11220,13 +11302,8 @@ if (typeof window !== "undefined") {
 const Column = props => {
   const chartRef = React.useRef(null);
   const chartOptions = React.useMemo(() => {
-    const chart = {
-      type: "column"
-    };
-    const column = _objectSpread(_objectSpread({}, props), {
-      chart
-    });
-    return _objectSpread(_objectSpread({}, initChart(column)), initSeries(column));
+    const column = _objectSpread$1({}, props);
+    return _objectSpread$1(_objectSpread$1({}, initChart$1(column)), initSeries$1(column));
   }, [props]);
   React.useEffect(() => {
     if (chartRef.current && chartRef.current.chart) {
@@ -11272,7 +11349,7 @@ const StackedColumn = props => {
     equalizer: false
   }));
 };
-const initSeries = props => {
+const initSeries$1 = props => {
   const renderXAxis = categories => ({
     categories,
     labels: {
@@ -11282,7 +11359,7 @@ const initSeries = props => {
       }
     }
   });
-  const renderYAxis = (labels, equalizer, series) => ({
+  const renderYAxis = (equalizer, series) => ({
     allowDecimals: false,
     title: {
       text: null
@@ -11329,7 +11406,7 @@ const initSeries = props => {
         enableMouseTracking: false,
         showInLegend: false
       });
-      const mainSeries = _objectSpread(_objectSpread({}, fillSeries(boundary)), {
+      const mainSeries = _objectSpread$1(_objectSpread$1({}, fillSeries(boundary)), {
         name: props.yAxisLabel[0],
         color: seriesColors ? seriesColors[0] : "gray",
         data: seriesData[0],
@@ -11369,7 +11446,7 @@ const initSeries = props => {
         pointWidth: undefined
       }
     };
-    const plot = _objectSpread(_objectSpread({}, {
+    const plot = _objectSpread$1(_objectSpread$1({}, {
       column: {
         borderWidth: 0,
         borderRadius: 10
@@ -11379,20 +11456,154 @@ const initSeries = props => {
   };
   return {
     xAxis: renderXAxis(props.xAxisLabel),
-    yAxis: renderYAxis(props.yAxisLabel || [], props.equalizer, props.series),
+    yAxis: renderYAxis(props.equalizer, props.series),
     plotOptions: renderPlot(props.equalizer),
     series: renderSeries(props.series, props === null || props === void 0 ? void 0 : props.colors, props.equalizer)
   };
 };
-const computeBoundary = items => {
-  return Math.ceil(Math.max(...items) * 1.1 / 10) * 10;
+
+const initChart = props => {
+  return {
+    chart: {
+      type: "areaspline",
+      backgroundColor: (props === null || props === void 0 ? void 0 : props.bgColor) || "rgba(255, 255, 255, 0)",
+      plotBackgroundColor: (props === null || props === void 0 ? void 0 : props.plotBgColor) || "rgba(255, 255, 255, 0)"
+    },
+    tooltip: {
+      backgroundColor: "#0F193D",
+      borderColor: "black",
+      borderRadius: 5,
+      borderWidth: 1,
+      style: {
+        color: "white"
+      },
+      format: props.series.length > 1 ? "<b>{key}</b><br/>{series.name}: <b>{y}</b><br/>" + "Total: <b>{point.stackTotal}</b>" : "<b>{key}</b><br/>{series.name}: {y}<br/>"
+    },
+    credits: {
+      enabled: false
+    },
+    exporting: {
+      enabled: false
+    },
+    title: {
+      text: props.title || null
+    },
+    labels: {
+      style: {
+        color: "#575E77"
+      }
+    },
+    legend: {
+      enabled: props.withLegend,
+      align: "right",
+      verticalAlign: "top"
+    }
+  };
 };
-const computeDelta = (items, boundary) => {
-  return items.map(item => {
-    if (!boundary) return 100;
-    return boundary - item;
+
+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), true).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; }
+const Area = props => {
+  const chartRef = React.useRef(null);
+  const chartOptions = React.useMemo(() => {
+    const area = _objectSpread({}, props);
+    return _objectSpread(_objectSpread({}, initChart(area)), initSeries(area));
+  }, [props]);
+  React.useEffect(() => {
+    if (chartRef.current && chartRef.current.chart) {
+      chartRef.current.chart.update(chartOptions, true);
+    }
+  }, [chartOptions]);
+  return /*#__PURE__*/React.createElement(HighchartsReact, {
+    highcharts: Highcharts,
+    ref: chartRef,
+    options: chartOptions
   });
 };
+const SimpleArea = props => {
+  const chartOptions = {
+    xAxisLabel: props.xAxisLabel,
+    yAxisLabel: [props.yAxisLabel],
+    series: [props.series],
+    withLegend: props.withLegend,
+    withCrossHair: props.withCrossHair,
+    bgColor: props.bgColor,
+    plotBgColor: props.plotBgColor,
+    colors: [props.color || "gray"],
+    title: props.title
+  };
+  return /*#__PURE__*/React.createElement(Area, chartOptions);
+};
+const initSeries = props => {
+  const renderXAxis = () => {
+    var _props$colors;
+    const crosshair = props.withCrossHair ? {
+      color: props !== null && props !== void 0 && (_props$colors = props.colors) !== null && _props$colors !== void 0 && _props$colors.length ? props === null || props === void 0 ? void 0 : props.colors[0] : "#ccc",
+      width: 2,
+      dashStyle: "Dot",
+      snap: true
+    } : undefined;
+    const categories = props.xAxisLabel;
+    const labels = {
+      style: {
+        textTransform: "uppercase",
+        color: "#575E77"
+      }
+    };
+    return {
+      categories,
+      crosshair,
+      labels
+    };
+  };
+  const renderYAxis = () => {
+    const defaults = {
+      allowDecimals: false,
+      title: {
+        text: null
+      },
+      gridLineDashStyle: "Dot",
+      gridLineWidth: 2
+    };
+    const labels = {
+      color: "#575E77"
+    };
+    return _objectSpread(_objectSpread({}, defaults), {
+      labels
+    });
+  };
+  const renderPlot = () => {
+    const areaspline = {
+      lineWidth: 1,
+      color: "#C8700B",
+      pointPlacement: "on",
+      marker: {
+        enabled: false
+      }
+    };
+    return {
+      areaspline
+    };
+  };
+  const renderSeries = () => {
+    const series = props.series.map((value, key) => {
+      var _props$colors2, _props$colors3;
+      return {
+        name: props.yAxisLabel[key],
+        color: (_props$colors2 = props.colors) !== null && _props$colors2 !== void 0 && _props$colors2.length ? props.colors[key] : "#C8700B",
+        data: value,
+        fillColor: createAreaFillGradient((_props$colors3 = props.colors) !== null && _props$colors3 !== void 0 && _props$colors3.length ? props.colors[key] : "#C8700B")
+      };
+    });
+    return series;
+  };
+  return {
+    xAxis: renderXAxis(),
+    yAxis: renderYAxis(),
+    plotOptions: renderPlot(),
+    series: renderSeries()
+  };
+};
 
 const Icons = _ref => {
   let {
@@ -11612,8 +11823,12 @@ const UserMenuTarget = _ref => {
   }, /*#__PURE__*/React.createElement(core.Group, {
     gap: "sm"
   }, /*#__PURE__*/React.createElement(core.Avatar, {
-    radius: "xl",
-    src: avatar
+    src: avatar,
+    radius: 'md',
+    key: name,
+    name: name,
+    color: "initials",
+    bd: '0.5px solid adiba.2'
   }), /*#__PURE__*/React.createElement(core.Stack, {
     gap: 0,
     align: "flex-start",
@@ -11931,11 +12146,17 @@ const AvatarLabelPanel = _ref2 => {
   }), /*#__PURE__*/React.createElement(core.Group, {
     align: "flex-start",
     py: "sm"
-  }, /*#__PURE__*/React.createElement(core.Center, {
-    w: labelWidth
+  }, /*#__PURE__*/React.createElement(core.Box, {
+    w: labelWidth,
+    pl: 'md'
   }, /*#__PURE__*/React.createElement(core.Avatar, {
     size: avatarSize,
-    src: avatar
+    src: avatar,
+    radius: 'md',
+    key: name,
+    name: name,
+    color: "initials",
+    bd: '0.5px solid adiba.2'
   })), /*#__PURE__*/React.createElement(core.Stack, {
     py: 10,
     gap: "md",
@@ -12298,7 +12519,7 @@ const ApplicationPanel = _ref => {
     src: coverImage,
     fallbackSrc: img$a
   }), /*#__PURE__*/React.createElement(core.Overlay, {
-    gradient: "linear-gradient(45deg, rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.1) 100%)"
+    gradient: "linear-gradient(45deg, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.05) 100%)"
   }))), /*#__PURE__*/React.createElement(core.Card.Section, {
     p: "md"
   }, /*#__PURE__*/React.createElement(core.Stack, {
@@ -12676,6 +12897,7 @@ exports.PaymentMethod = PaymentMethod;
 exports.PaymentMethodAdd = PaymentMethodAdd;
 exports.SearchPanel = SearchPanel;
 exports.SideMenu = SideMenu;
+exports.SimpleArea = SimpleArea;
 exports.SimpleColumn = SimpleColumn;
 exports.SimplePanel = SimplePanel;
 exports.SimpleTable = SimpleTable;

package/build/index.esm.js/index.js

@@ -11149,7 +11149,7 @@ function requireHighcharts() {
 var highchartsExports = requireHighcharts();
 var Highcharts = /*@__PURE__*/getDefaultExportFromCjs(highchartsExports);
 
-const initChart = props => {
+const initChart$1 = props => {
   return {
     chart: {
       type: "column",
@@ -11189,8 +11189,90 @@ const initChart = props => {
   };
 };
 
-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), true).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; }
+const computeBoundary = items => {
+  return Math.ceil(Math.max(...items) * 1.1 / 10) * 10;
+};
+const computeDelta = (items, boundary) => {
+  return items.map(item => {
+    if (!boundary) return 100;
+    return boundary - item;
+  });
+};
+const parseColorToRgb = colorString => {
+  if (colorString.startsWith("#")) {
+    const hex = colorString.slice(1);
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+    return {
+      r,
+      g,
+      b
+    };
+  } else if (colorString.startsWith("rgb")) {
+    var _colorString$match;
+    const parts = (_colorString$match = colorString.match(/\d+/g)) === null || _colorString$match === void 0 ? void 0 : _colorString$match.map(Number);
+    if (parts !== null && parts !== void 0 && parts.length) return {
+      r: parts[0],
+      g: parts[1],
+      b: parts[2]
+    };
+  }
+  console.warn("Color format '".concat(colorString, "' not fully recognized. Using black as fallback."));
+  return {
+    r: 0,
+    g: 0,
+    b: 0
+  };
+};
+
+/**
+ * Creates a Highcharts linear gradient fillColor configuration for an Area/AreaSpline series.
+ * The gradient flows vertically from the baseColor (at the series line) down to the x-axis,
+ * fading to a transparent version of the baseColor.
+ *
+ * @param {string} baseColor The primary color for the gradient (e.g., '#FF0000', 'rgb(0,128,255)').
+ * @param {object} [options] Configuration options for the gradient.
+ * @param {number} [options.startOpacity=0.7] The opacity of the `baseColor` at the top (near the series line, position 0).
+ * Value should be between 0 (fully transparent) and 1 (fully opaque).
+ * @param {number} [options.endOpacity=0.0] The opacity of the transparent end color at the bottom (near the x-axis, position 1).
+ * Value should be between 0 (fully transparent) and 1 (fully opaque).
+ * @returns {Highcharts.GradientColorObject} A Highcharts `fillColor` configuration object.
+ */
+const createAreaFillGradient = function (baseColor) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const {
+    startOpacity = 0.2,
+    endOpacity = 0.08
+  } = options;
+  const parsedColor = parseColorToRgb(baseColor);
+  "rgba(".concat(parsedColor.r, ", ").concat(parsedColor.g, ", ").concat(parsedColor.b, ", 1)");
+
+  // Color string for the top of the gradient (base color with specified start opacity)
+  const rgbaStart = "rgba(".concat(parsedColor.r, ", ").concat(parsedColor.g, ", ").concat(parsedColor.b, ", ").concat(startOpacity, ")");
+
+  // Color string for the bottom of the gradient (always transparent version of base color)
+  const rgbaEnd = "rgba(".concat(parsedColor.r, ", ").concat(parsedColor.g, ", ").concat(parsedColor.b, ", ").concat(endOpacity, ")");
+  return {
+    linearGradient: {
+      x1: 0,
+      // Gradient starts at the left edge
+      y1: 0,
+      // Gradient starts at the top edge
+      x2: 0,
+      // Gradient ends at the left edge (same x as start)
+      y2: 1 // Gradient ends at the bottom edge (so it's a vertical gradient)
+    },
+    stops: [[0, rgbaStart],
+    // First stop: at the top (0% of gradient vector)
+    [0.9, rgbaEnd],
+    // Second stop: at the bottom (100% of gradient vector)
+    [1, "transparent"]]
+  };
+};
+
+function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 
 // Initialize Highcharts with rounded corners
 if (typeof window !== "undefined") {
@@ -11199,13 +11281,8 @@ if (typeof window !== "undefined") {
 const Column = props => {
   const chartRef = useRef(null);
   const chartOptions = useMemo(() => {
-    const chart = {
-      type: "column"
-    };
-    const column = _objectSpread(_objectSpread({}, props), {
-      chart
-    });
-    return _objectSpread(_objectSpread({}, initChart(column)), initSeries(column));
+    const column = _objectSpread$1({}, props);
+    return _objectSpread$1(_objectSpread$1({}, initChart$1(column)), initSeries$1(column));
   }, [props]);
   useEffect(() => {
     if (chartRef.current && chartRef.current.chart) {
@@ -11251,7 +11328,7 @@ const StackedColumn = props => {
     equalizer: false
   }));
 };
-const initSeries = props => {
+const initSeries$1 = props => {
   const renderXAxis = categories => ({
     categories,
     labels: {
@@ -11261,7 +11338,7 @@ const initSeries = props => {
       }
     }
   });
-  const renderYAxis = (labels, equalizer, series) => ({
+  const renderYAxis = (equalizer, series) => ({
     allowDecimals: false,
     title: {
       text: null
@@ -11308,7 +11385,7 @@ const initSeries = props => {
         enableMouseTracking: false,
         showInLegend: false
       });
-      const mainSeries = _objectSpread(_objectSpread({}, fillSeries(boundary)), {
+      const mainSeries = _objectSpread$1(_objectSpread$1({}, fillSeries(boundary)), {
         name: props.yAxisLabel[0],
         color: seriesColors ? seriesColors[0] : "gray",
         data: seriesData[0],
@@ -11348,7 +11425,7 @@ const initSeries = props => {
         pointWidth: undefined
       }
     };
-    const plot = _objectSpread(_objectSpread({}, {
+    const plot = _objectSpread$1(_objectSpread$1({}, {
       column: {
         borderWidth: 0,
         borderRadius: 10
@@ -11358,20 +11435,154 @@ const initSeries = props => {
   };
   return {
     xAxis: renderXAxis(props.xAxisLabel),
-    yAxis: renderYAxis(props.yAxisLabel || [], props.equalizer, props.series),
+    yAxis: renderYAxis(props.equalizer, props.series),
     plotOptions: renderPlot(props.equalizer),
     series: renderSeries(props.series, props === null || props === void 0 ? void 0 : props.colors, props.equalizer)
   };
 };
-const computeBoundary = items => {
-  return Math.ceil(Math.max(...items) * 1.1 / 10) * 10;
+
+const initChart = props => {
+  return {
+    chart: {
+      type: "areaspline",
+      backgroundColor: (props === null || props === void 0 ? void 0 : props.bgColor) || "rgba(255, 255, 255, 0)",
+      plotBackgroundColor: (props === null || props === void 0 ? void 0 : props.plotBgColor) || "rgba(255, 255, 255, 0)"
+    },
+    tooltip: {
+      backgroundColor: "#0F193D",
+      borderColor: "black",
+      borderRadius: 5,
+      borderWidth: 1,
+      style: {
+        color: "white"
+      },
+      format: props.series.length > 1 ? "<b>{key}</b><br/>{series.name}: <b>{y}</b><br/>" + "Total: <b>{point.stackTotal}</b>" : "<b>{key}</b><br/>{series.name}: {y}<br/>"
+    },
+    credits: {
+      enabled: false
+    },
+    exporting: {
+      enabled: false
+    },
+    title: {
+      text: props.title || null
+    },
+    labels: {
+      style: {
+        color: "#575E77"
+      }
+    },
+    legend: {
+      enabled: props.withLegend,
+      align: "right",
+      verticalAlign: "top"
+    }
+  };
 };
-const computeDelta = (items, boundary) => {
-  return items.map(item => {
-    if (!boundary) return 100;
-    return boundary - item;
+
+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), true).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; }
+const Area = props => {
+  const chartRef = useRef(null);
+  const chartOptions = useMemo(() => {
+    const area = _objectSpread({}, props);
+    return _objectSpread(_objectSpread({}, initChart(area)), initSeries(area));
+  }, [props]);
+  useEffect(() => {
+    if (chartRef.current && chartRef.current.chart) {
+      chartRef.current.chart.update(chartOptions, true);
+    }
+  }, [chartOptions]);
+  return /*#__PURE__*/React.createElement(HighchartsReact, {
+    highcharts: Highcharts,
+    ref: chartRef,
+    options: chartOptions
   });
 };
+const SimpleArea = props => {
+  const chartOptions = {
+    xAxisLabel: props.xAxisLabel,
+    yAxisLabel: [props.yAxisLabel],
+    series: [props.series],
+    withLegend: props.withLegend,
+    withCrossHair: props.withCrossHair,
+    bgColor: props.bgColor,
+    plotBgColor: props.plotBgColor,
+    colors: [props.color || "gray"],
+    title: props.title
+  };
+  return /*#__PURE__*/React.createElement(Area, chartOptions);
+};
+const initSeries = props => {
+  const renderXAxis = () => {
+    var _props$colors;
+    const crosshair = props.withCrossHair ? {
+      color: props !== null && props !== void 0 && (_props$colors = props.colors) !== null && _props$colors !== void 0 && _props$colors.length ? props === null || props === void 0 ? void 0 : props.colors[0] : "#ccc",
+      width: 2,
+      dashStyle: "Dot",
+      snap: true
+    } : undefined;
+    const categories = props.xAxisLabel;
+    const labels = {
+      style: {
+        textTransform: "uppercase",
+        color: "#575E77"
+      }
+    };
+    return {
+      categories,
+      crosshair,
+      labels
+    };
+  };
+  const renderYAxis = () => {
+    const defaults = {
+      allowDecimals: false,
+      title: {
+        text: null
+      },
+      gridLineDashStyle: "Dot",
+      gridLineWidth: 2
+    };
+    const labels = {
+      color: "#575E77"
+    };
+    return _objectSpread(_objectSpread({}, defaults), {
+      labels
+    });
+  };
+  const renderPlot = () => {
+    const areaspline = {
+      lineWidth: 1,
+      color: "#C8700B",
+      pointPlacement: "on",
+      marker: {
+        enabled: false
+      }
+    };
+    return {
+      areaspline
+    };
+  };
+  const renderSeries = () => {
+    const series = props.series.map((value, key) => {
+      var _props$colors2, _props$colors3;
+      return {
+        name: props.yAxisLabel[key],
+        color: (_props$colors2 = props.colors) !== null && _props$colors2 !== void 0 && _props$colors2.length ? props.colors[key] : "#C8700B",
+        data: value,
+        fillColor: createAreaFillGradient((_props$colors3 = props.colors) !== null && _props$colors3 !== void 0 && _props$colors3.length ? props.colors[key] : "#C8700B")
+      };
+    });
+    return series;
+  };
+  return {
+    xAxis: renderXAxis(),
+    yAxis: renderYAxis(),
+    plotOptions: renderPlot(),
+    series: renderSeries()
+  };
+};
 
 const Icons = _ref => {
   let {
@@ -11591,8 +11802,12 @@ const UserMenuTarget = _ref => {
   }, /*#__PURE__*/React.createElement(Group, {
     gap: "sm"
   }, /*#__PURE__*/React.createElement(Avatar, {
-    radius: "xl",
-    src: avatar
+    src: avatar,
+    radius: 'md',
+    key: name,
+    name: name,
+    color: "initials",
+    bd: '0.5px solid adiba.2'
   }), /*#__PURE__*/React.createElement(Stack, {
     gap: 0,
     align: "flex-start",
@@ -11910,11 +12125,17 @@ const AvatarLabelPanel = _ref2 => {
   }), /*#__PURE__*/React.createElement(Group, {
     align: "flex-start",
     py: "sm"
-  }, /*#__PURE__*/React.createElement(Center, {
-    w: labelWidth
+  }, /*#__PURE__*/React.createElement(Box, {
+    w: labelWidth,
+    pl: 'md'
   }, /*#__PURE__*/React.createElement(Avatar, {
     size: avatarSize,
-    src: avatar
+    src: avatar,
+    radius: 'md',
+    key: name,
+    name: name,
+    color: "initials",
+    bd: '0.5px solid adiba.2'
   })), /*#__PURE__*/React.createElement(Stack, {
     py: 10,
     gap: "md",
@@ -12277,7 +12498,7 @@ const ApplicationPanel = _ref => {
     src: coverImage,
     fallbackSrc: img$a
   }), /*#__PURE__*/React.createElement(Overlay, {
-    gradient: "linear-gradient(45deg, rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.1) 100%)"
+    gradient: "linear-gradient(45deg, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.05) 100%)"
   }))), /*#__PURE__*/React.createElement(Card.Section, {
     p: "md"
   }, /*#__PURE__*/React.createElement(Stack, {
@@ -12640,4 +12861,4 @@ const File = _ref => {
   }, /*#__PURE__*/React.createElement(Icons, rightsection === null || rightsection === void 0 ? void 0 : rightsection.icon)) : undefined)));
 };
 
-export { ApplicationMenu, ApplicationPanel, AvatarLabelPanel, ConnectionPanel, DynamicLogo, DynamicShigaLogo, EqualizerColumn, File, Icons, LabelPanel, PageTitle, PaymentMethod, PaymentMethodAdd, SearchPanel, SideMenu, SimpleColumn, SimplePanel, SimpleTable, SimpleText, StackedColumn, SubscriptionPlans, TitleWithIndex, TitledPanel, UserMenu, theme };
+export { ApplicationMenu, ApplicationPanel, AvatarLabelPanel, ConnectionPanel, DynamicLogo, DynamicShigaLogo, EqualizerColumn, File, Icons, LabelPanel, PageTitle, PaymentMethod, PaymentMethodAdd, SearchPanel, SideMenu, SimpleArea, SimpleColumn, SimplePanel, SimpleTable, SimpleText, StackedColumn, SubscriptionPlans, TitleWithIndex, TitledPanel, UserMenu, theme };

package/build/typings/components/charts/area/Area.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { SimpleAreaChartProps } from "./Area.types";
+export declare const SimpleArea: React.FC<SimpleAreaChartProps>;

package/build/typings/components/charts/area/Area.default.d.ts

@@ -0,0 +1,2 @@
+import { AreaChartConfig, AreaChartProps } from './Area.types';
+export declare const initChart: (props: AreaChartProps) => AreaChartConfig;

package/build/typings/components/charts/area/Area.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta } from "@storybook/react";
+import "@mantine/core/styles.css";
+import { SimpleArea } from "./Area";
+declare const _default: Meta<typeof SimpleArea>;
+export default _default;
+export declare const SimpleAreaChart: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./Area.types").SimpleAreaChartProps>;

package/build/typings/components/charts/area/Area.types.d.ts

@@ -0,0 +1,59 @@
+export interface AreaChartConfig {
+    chart: object;
+    tooltip: object;
+    credits: object;
+    exporting: object;
+    title: object;
+    labels: object;
+    legend: object;
+}
+export interface AreaChartProps {
+    bgColor?: string;
+    plotBgColor?: string;
+    colors?: string[];
+    title?: string;
+    xAxisLabel: string[];
+    yAxisLabel: string[];
+    series: number[][];
+    withLegend: boolean;
+    withCrossHair: boolean;
+}
+export interface SimpleAreaChartProps {
+    bgColor?: string;
+    plotBgColor?: string;
+    color?: string;
+    title?: string;
+    xAxisLabel: string[];
+    yAxisLabel: string;
+    series: number[];
+    withLegend: boolean;
+    withCrossHair: boolean;
+}
+export interface ChartSeriesArea {
+    xAxis: {
+        categories: string[];
+        labels: object;
+        crosshair?: {
+            color: string;
+            width: number;
+            dashStyle: string;
+            snap: boolean;
+        };
+    };
+    yAxis: {
+        allowDecimals: boolean;
+        title: object;
+        gridLineDashStyle?: string;
+        gridLineWidth?: number;
+        labels: object;
+    };
+    series: AreaChartSeries[];
+    plotOptions: object;
+}
+export interface AreaChartSeries {
+    name: string;
+    data: number[];
+    color: string;
+    enableMouseTracking?: boolean;
+    showInLegend?: boolean;
+}

package/build/typings/components/index.d.ts

@@ -1,4 +1,5 @@
 export { SimpleColumn, EqualizerColumn, StackedColumn, } from "./charts/column/Column";
+export { SimpleArea } from "./charts/area/Area";
 export { Icons } from "./general/icons/Icons";
 export { DynamicLogo, DynamicShigaLogo } from "./general/logos/Logos";
 export { ApplicationMenu } from "./menus/application/Application";

package/build/typings/shared/libs/charts.d.ts

@@ -0,0 +1,24 @@
+export declare const computeBoundary: (items: number[]) => number;
+export declare const computeDelta: (items: number[], boundary: number) => number[];
+export declare const parseColorToRgb: (colorString: string) => {
+    r: number;
+    g: number;
+    b: number;
+};
+/**
+ * Creates a Highcharts linear gradient fillColor configuration for an Area/AreaSpline series.
+ * The gradient flows vertically from the baseColor (at the series line) down to the x-axis,
+ * fading to a transparent version of the baseColor.
+ *
+ * @param {string} baseColor The primary color for the gradient (e.g., '#FF0000', 'rgb(0,128,255)').
+ * @param {object} [options] Configuration options for the gradient.
+ * @param {number} [options.startOpacity=0.7] The opacity of the `baseColor` at the top (near the series line, position 0).
+ * Value should be between 0 (fully transparent) and 1 (fully opaque).
+ * @param {number} [options.endOpacity=0.0] The opacity of the transparent end color at the bottom (near the x-axis, position 1).
+ * Value should be between 0 (fully transparent) and 1 (fully opaque).
+ * @returns {Highcharts.GradientColorObject} A Highcharts `fillColor` configuration object.
+ */
+export declare const createAreaFillGradient: (baseColor: string, options?: {
+    startOpacity?: number;
+    endOpacity?: number;
+}) => Highcharts.GradientColorObject;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@adiba-banking-cloud/backoffice",
   "author": "TUROG Technologies",
-  "version": "0.0.28",
+  "version": "0.0.30",
   "description": "An ADIBA component library for backoffice and dashboard applications",
   "license": "ISC",
   "main": "build/index.cjs.js",